tacky test for sidebar toggling

src/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M18.7,27.5h62.7c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5H18.7c-2.5,0-4.5,2-4.5,4.5S16.2,27.5,18.7,27.5z"/><path d="M81.4,45.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,45.5,81.4,45.5z"/><path d="M81.4,72.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,72.5,81.4,72.5z"/></g></svg>

src/components/Layout/Layout.scss

@@ -61,6 +61,7 @@
 
 .content {
   display: flex;
+  flex: 1;
   justify-content: center;
 
   &.fixed {

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;
+  }
 }