Added UI store with sidebar toggling

src/index.js

@@ -40,7 +40,7 @@ function requireAuth(nextState, replace) {
 
 render((
   <div style={{ display: 'flex', flex: 1, }}>
-    <Provider user={ stores.user }>
+    <Provider { ...stores }>
       <Router history={History}>
         <Route path="/" component={ Application }>
           <IndexRoute component={Home} />

src/scenes/DocumentScene/DocumentScene.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { toJS } from 'mobx';
 import { Link, browserHistory } from 'react-router';
 import { observer } from 'mobx-react';
@@ -21,13 +21,16 @@ const cx = classNames.bind(styles);
 
 import treeStyles from 'components/Tree/Tree.scss';
 
-@observer
+@observer(['ui'])
 class DocumentScene extends React.Component {
+  static propTypes = {
+    ui: PropTypes.object.isRequired,
+  }
+
   static store;
 
   state = {
     didScroll: false,
-    showSidebar: true,
   }
 
   constructor(props) {
@@ -84,10 +87,6 @@ class DocumentScene extends React.Component {
     };
   }
 
-  toggleSidebar = () => {
-    this.setState({ showSidebar: !this.state.showSidebar });
-  }
-
   renderNode = (node) => {
     return (
       <span className={ treeStyles.nodeLabel } onClick={this.onClickNode.bind(null, node)}>
@@ -97,6 +96,11 @@ class DocumentScene extends React.Component {
   }
 
   render() {
+    const {
+      sidebar,
+      toggleSidebar,
+    } = this.props.ui;
+
     const doc = this.store.document;
     const allowDelete = doc && doc.atlas.type === 'atlas' &&
       doc.id !== doc.atlas.navigationTree.id;
@@ -135,7 +139,7 @@ class DocumentScene extends React.Component {
           </CenteredContent>
         ) : (
           <Flex flex={ true }>
-            { this.store.isAtlas && this.state.showSidebar ? (
+            { this.store.isAtlas && sidebar && (
               <div className={ styles.sidebar }>
                 <Tree
                   paddingLeft={ 10 }
@@ -146,13 +150,13 @@ class DocumentScene extends React.Component {
                   renderNode={ this.renderNode }
                 />
               </div>
-            ) : null }
+            ) }
             <Flex flex={ true } justify={ 'center' } className={ styles.content}>
-              <img
+              { this.store.isAtlas && (<img
                 src={ require("assets/icons/menu.svg") }
                 className={ styles.menuIcon }
-                onClick={ this.toggleSidebar }
-              />
+                onClick={ toggleSidebar }
+              />) }
               <CenteredContent>
                 { this.store.updatingContent ? (
                   <AtlasPreviewLoading />

src/scenes/DocumentScene/DocumentScene.scss

@@ -19,7 +19,7 @@
   top: 22px;
   left: 17px;
   height: 28px;
-  opacity: 0.5;
+  opacity: 0.15;
 
   &:hover {
     opacity: 1;

src/stores/UiStore.js

@@ -0,0 +1,32 @@
+import { observable, action, computed } from 'mobx';
+
+const UI_STORE = 'UI_STORE';
+
+class UiStore {
+  @observable sidebar;
+
+  /* Computed */
+
+  @computed get asJson() {
+    return JSON.stringify({
+      sidebar: this.sidebar,
+    });
+  }
+
+  /* Actions */
+
+  @action toggleSidebar = () => {
+    this.sidebar = !this.sidebar;
+  };
+
+  constructor() {
+    // Rehydrate
+    const data = JSON.parse(localStorage.getItem(UI_STORE) || '{}');
+    this.sidebar = data.sidebar;
+  }
+};
+
+export default UiStore;
+export {
+  UI_STORE,
+};

src/stores/UserStore.js

@@ -64,7 +64,7 @@ class UserStore {
 
   constructor() {
     // Rehydrate
-    const data = JSON.parse(localStorage.getItem(USER_STORE)) || {};
+    const data = JSON.parse(localStorage.getItem(USER_STORE) || '{}');
     this.user = data.user;
     this.team = data.team;
     this.token = data.token;

src/stores/index.js

@@ -1,13 +1,16 @@
 import UserStore, { USER_STORE } from './UserStore';
-import { autorun } from 'mobx';
+import UiStore, { UI_STORE } from './UiStore';
+import { autorun, toJS } from 'mobx';
 
 const stores = {
   user: new UserStore(),
+  ui: new UiStore(),
 };
 
-// Persist store to localStorage
+// Persist stores to localStorage
 autorun(() => {
   localStorage.setItem(USER_STORE, stores.user.asJson);
+  localStorage.setItem(UI_STORE, stores.ui.asJson);
 });
 
-export default stores;
+export default stores;