tacky test for sidebar toggling

src/scenes/Application.js

@@ -4,7 +4,7 @@ import Helmet from "react-helmet";
 
 const Application = observer((props) => {
   return (
-    <div style={{ width: '100%' }}>
+    <div style={{ width: '100%', display: 'flex', flex: 1, }}>
       <Helmet
         title="Beautiful Atlas"
         meta={[
@@ -20,4 +20,4 @@ Application.propTypes = {
   children: React.PropTypes.node.isRequired,
 }
 
-export default Application;
+export default Application;

src/scenes/DocumentScene/DocumentScene.js

@@ -27,6 +27,7 @@ class DocumentScene extends React.Component {
 
   state = {
     didScroll: false,
+    showSidebar: true,
   }
 
   constructor(props) {
@@ -83,6 +84,10 @@ 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)}>
@@ -130,7 +135,7 @@ class DocumentScene extends React.Component {
           </CenteredContent>
         ) : (
           <Flex flex={ true }>
-            { this.store.isAtlas ? (
+            { this.store.isAtlas && this.state.showSidebar ? (
               <div className={ styles.sidebar }>
                 <Tree
                   paddingLeft={ 10 }
@@ -142,7 +147,12 @@ class DocumentScene extends React.Component {
                 />
               </div>
             ) : null }
-            <Flex flex={ true } justify={ 'center' }>
+            <Flex flex={ true } justify={ 'center' } className={ styles.content}>
+              <img
+                src={ require("assets/icons/menu.svg") }
+                className={ styles.menuIcon }
+                onClick={ this.toggleSidebar }
+              />
               <CenteredContent>
                 { this.store.updatingContent ? (
                   <AtlasPreviewLoading />

src/scenes/DocumentScene/DocumentScene.scss

@@ -5,5 +5,23 @@
 
 .sidebar {
   width: 250px;
-  padding: 40px 20px;
+  padding: 20px 20px 20px 5px;
+
+  border-right: 1px solid #eee;
+}
+
+.content {
+  position: relative;
+}
+
+.menuIcon {
+  position: absolute;
+  top: 22px;
+  left: 17px;
+  height: 28px;
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
 }