Attempt to slightly improve the sidebar styling

app/lib/components/ToolArea/TabHeader.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import * as stateActions from '../../redux/stateActions';
+
+const TabHeader = ({ currentToolTab, setToolTab, id, name, badge }) => (
+	<div
+		className={classNames('tab-header', {
+			checked : currentToolTab === id
+		})}
+		onClick={() => setToolTab(id)}
+	>
+		{name}
+
+		{badge > 0 && (
+			<span className='badge'>{badge}</span>
+		)}
+	</div>
+);
+
+TabHeader.propTypes = {
+	currentToolTab : PropTypes.string.isRequired,
+	setToolTab     : PropTypes.func.isRequired,
+	id             : PropTypes.string.isRequired,
+	name           : PropTypes.string.isRequired,
+	badge          : PropTypes.number
+};
+
+const mapStateToProps = (state) => ({
+	currentToolTab : state.toolarea.currentToolTab
+});
+
+const mapDispatchToProps = {
+	setToolTab : stateActions.setToolTab
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(TabHeader);

app/lib/components/ToolArea/ToolArea.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import * as toolTabActions from '../../redux/stateActions';
 import ParticipantList from '../ParticipantList/ParticipantList';
 import Chat from '../Chat/Chat';
 import Settings from '../Settings';
 import FileSharing from '../FileSharing';
+import TabHeader from './TabHeader';
 
 class ToolArea extends React.Component
 {
@@ -18,88 +20,61 @@ class ToolArea extends React.Component
 	{
 		const {
 			currentToolTab,
+			toolAreaOpen,
 			unreadMessages,
-			unreadFiles,
-			setToolTab
+			unreadFiles
 		} = this.props;
 
+		const VisibleTab = {
+			chat     : Chat,
+			files    : FileSharing,
+			users    : ParticipantList,
+			settings : Settings
+		}[currentToolTab];
+
 		return (
-			<div data-component='ToolArea'>
-				<div className='tabs'>
-					<input
-						type='radio'
-						name='tabs'
-						id='tab-chat'
-						onChange={() =>
-						{
-							setToolTab('chat');
-						}}
-						checked={currentToolTab === 'chat'}
-					/>
-					<label htmlFor='tab-chat'>
-						Chat
-						
-						{unreadMessages > 0 && (
-							<span className='badge'>{unreadMessages}</span>
-						)}
-					</label>
+			<Fragment>
+				<div
+					className={classNames('toolarea-shade', {
+						open : toolAreaOpen
+					})}
+				/>
 
-					<div className='tab'>
-						<Chat />
+				<div
+					data-component='ToolArea' 
+					className={classNames({
+						open : toolAreaOpen
+					})}
+				>
+					<div className='tab-headers'>
+						<TabHeader
+							id='chat'
+							name='Chat'
+							badge={unreadMessages}
+						/>
+
+						<TabHeader
+							id='files'
+							name='Files'
+							badge={unreadFiles}
+						/>
+
+						<TabHeader
+							id='users'
+							name='Users'
+						/>
+
+						<TabHeader
+							id='settings'
+							name='Settings'
+						/>
 					</div>
 
-					<input
-						type='radio'
-						name='tabs'
-						id='tab-files'
-						onChange={() => setToolTab('files')}
-						checked={currentToolTab === 'files'}
-					/>
-					<label htmlFor='tab-files'>
-						Files
-
-						{unreadFiles > 0 && (
-							<span className='badge'>{unreadFiles}</span>
-						)}
-					</label>
-
 					<div className='tab'>
-						<FileSharing />
-					</div>
-
-					<input
-						type='radio'
-						name='tabs'
-						id='tab-users'
-						onChange={() =>
-						{
-							setToolTab('users');
-						}}
-						checked={currentToolTab === 'users'}
-					/>
-					<label htmlFor='tab-users'>Users</label>
-
-					<div className='tab'>
-						<ParticipantList />
-					</div>
-
-					<input
-						type='radio'
-						name='tabs'
-						id='tab-settings'
-						onChange={() =>
-						{
-							setToolTab('settings');
-						}}
-						checked={currentToolTab === 'settings'}
-					/>
-					<label htmlFor='tab-settings'>Settings</label>
-
-					<div className='tab'>
-						<Settings />
+						<VisibleTab />
 					</div>
 				</div>
-			</div>
+			</Fragment>
 		);
 	}
 }
@@ -110,13 +85,15 @@ ToolArea.propTypes =
 	currentToolTab : PropTypes.string.isRequired,
 	setToolTab     : PropTypes.func.isRequired,
 	unreadMessages : PropTypes.number.isRequired,
-	unreadFiles    : PropTypes.number.isRequired
+	unreadFiles    : PropTypes.number.isRequired,
+	toolAreaOpen   : PropTypes.bool
 };
 
 const mapStateToProps = (state) => ({
 	currentToolTab : state.toolarea.currentToolTab,
 	unreadMessages : state.toolarea.unreadMessages,
-	unreadFiles    : state.toolarea.unreadFiles
+	unreadFiles    : state.toolarea.unreadFiles,
+	toolAreaOpen   : state.toolarea.toolAreaOpen
 });
 
 const mapDispatchToProps = {