Off-canvas tablist

client/src/js/actions/tab.js

@@ -1,7 +1,9 @@
 var Reflux = require('reflux');
 
 var tabActions = Reflux.createActions([
-	'select'
+	'select',
+	'hideMenu',
+	'toggleMenu'
 ]);
 
 module.exports = tabActions;

client/src/js/components/App.jsx

@@ -6,15 +6,24 @@ var Navigation = Router.Navigation;
 
 var TabList = require('./TabList.jsx');
 var routeActions = require('../actions/route');
+var tabActions = require('../actions/tab');
 var PureMixin = require('../mixins/pure');
 
 var App = React.createClass({
 	mixins: [
 		PureMixin,
 		Navigation,
-		Reflux.listenTo(routeActions.navigate, 'navigate')
+		Reflux.listenTo(routeActions.navigate, 'navigate'),
+		Reflux.listenTo(tabActions.hideMenu, 'hideMenu'),
+		Reflux.listenTo(tabActions.toggleMenu, 'toggleMenu')
 	],
 
+	getInitialState() {
+		return {
+			menuToggled: false
+		};
+	},
+
 	navigate(path, replace) {
 		if (!replace) {
 			this.transitionTo(path);
@@ -23,11 +32,23 @@ var App = React.createClass({
 		}
 	},
 
+	hideMenu() {
+		this.setState({ menuToggled: false });
+	},
+
+	toggleMenu() {
+		this.setState({ menuToggled: !this.state.menuToggled });
+	},
+
 	render() {
+		var mainClass = this.state.menuToggled ? 'main-container off-canvas' : 'main-container';
+
 		return (
 			<div>
-				<TabList />
-				<RouteHandler />
+				<TabList menuToggled={this.state.menuToggled} />
+				<div className={mainClass}>
+					<RouteHandler />
+				</div>
 			</div>
 		);
 	}

client/src/js/components/ChatTitle.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var Reflux = require('reflux');
 var Autolinker = require('autolinker');
 
+var Navicon = require('./Navicon.jsx');
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
 var serverActions = require('../actions/server');
@@ -65,6 +66,7 @@ var ChatTitle = React.createClass({
         return (
             <div>
                 <div className="chat-title-bar">
+                    <Navicon />
                     <span className="chat-title">{tab.name}</span>
                     <div className="chat-topic-wrap">
                         <span className="chat-topic" dangerouslySetInnerHTML={{ __html: topic }}></span>

client/src/js/components/Connect.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var _ = require('lodash');
 
+var Navicon = require('./Navicon.jsx');
 var serverActions = require('../actions/server');
 var channelActions = require('../actions/channel');
 var PureMixin = require('../mixins/pure');
@@ -59,6 +60,7 @@ var Connect = React.createClass({
 
 		return (
 			<div className="connect">
+				<Navicon />
 				<form ref="form" className="connect-form" onSubmit={this.handleSubmit}>
 					<h1>Connect</h1>
 					<input name="name" type="text" placeholder="Name" defaultValue="Freenode" />

client/src/js/components/MessageInput.jsx

@@ -5,14 +5,12 @@ var inputHistoryStore = require('../stores/inputHistory');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');
 var inputHistoryActions = require('../actions/inputHistory');
-var tabActions = require('../actions/tab');
 var PureMixin = require('../mixins/pure');
 
 var MessageInput = React.createClass({
 	mixins: [
 		PureMixin,
-		Reflux.connect(inputHistoryStore, 'history'),
-		Reflux.listenTo(tabActions.select, 'tabSelected')
+		Reflux.connect(inputHistoryStore, 'history')
 	],
 
 	getInitialState() {
@@ -21,14 +19,6 @@ var MessageInput = React.createClass({
 		};
 	},
 
-	componentDidMount() {
-		this.refs.input.getDOMNode().focus();
-	},
-
-	tabSelected() {
-		this.refs.input.getDOMNode().focus();
-	},
-
 	handleKey(e) {
 		if (e.which === 13 && e.target.value) {
 			var tab = selectedTabStore.getState();

client/src/js/components/Navicon.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var tabActions = require('../actions/tab');
+
+var Navicon = React.createClass({
+	render() {
+		return (
+			<i className="icon-menu navicon" onClick={tabActions.toggleMenu}></i>
+		);
+	}
+});
+
+module.exports = Navicon;

client/src/js/components/Settings.jsx

@@ -1,10 +1,12 @@
 var React = require('react');
 
+var Navicon = require('./Navicon.jsx');
+
 var Settings = React.createClass({
 	render() {
 		return (
 			<div>
-				<h1>Settings</h1>
+				<Navicon />
 			</div>
 		);
 	}

client/src/js/components/TabList.jsx

@@ -25,6 +25,7 @@ var TabList = React.createClass({
 	},
 
 	render() {
+		var className = this.props.menuToggled ? 'tablist off-canvas' : 'tablist';
 		var tabs = [];
 
 		this.state.channels.forEach((server, address) => {
@@ -63,7 +64,7 @@ var TabList = React.createClass({
 		});
 
 		return (
-			<div className="tablist">
+			<div className={className}>
 				<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
 				<div className="tab-container">{tabs}</div>
 				<div className="side-buttons">

client/src/js/stores/selectedTab.js

@@ -159,6 +159,8 @@ var selectedTabStore = Reflux.createStore({
 selectedTabStore.listen(tab => {
 	var channel = tab.channel;
 
+	actions.hideMenu();
+
 	if (tab.server) {
 		if (channel) {
 			while (channel[0] === '#') {