Tweaks to atlas menu icon

src/index.js

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

src/scenes/DocumentScene/DocumentScene.js

@@ -139,24 +139,29 @@ class DocumentScene extends React.Component {
           </CenteredContent>
         ) : (
           <Flex flex={ true }>
-            { this.store.isAtlas && sidebar && (
-              <div className={ styles.sidebar }>
-                <Tree
-                  paddingLeft={ 10 }
-                  tree={ toJS(this.store.atlasTree) }
-                  onChange={ this.store.updateNavigationTree  }
-                  onCollapse={ this.store.onNodeCollapse }
-                  isNodeCollapsed={ this.isNodeCollapsed }
-                  renderNode={ this.renderNode }
-                />
-              </div>
+            { this.store.isAtlas && (
+              <Flex>
+                { sidebar && (
+                  <div className={ styles.sidebar }>
+                    <Tree
+                      paddingLeft={ 10 }
+                      tree={ toJS(this.store.atlasTree) }
+                      onChange={ this.store.updateNavigationTree  }
+                      onCollapse={ this.store.onNodeCollapse }
+                      isNodeCollapsed={ this.isNodeCollapsed }
+                      renderNode={ this.renderNode }
+                    />
+                  </div>
+                ) }
+                <div className={ styles.sidebarToggle } onClick={ toggleSidebar }>
+                  <img
+                    src={ require("assets/icons/menu.svg") }
+                    className={ styles.menuIcon }
+                  />
+                </div>
+              </Flex>
             ) }
             <Flex flex={ true } justify={ 'center' } className={ styles.content}>
-              { this.store.isAtlas && (<img
-                src={ require("assets/icons/menu.svg") }
-                className={ styles.menuIcon }
-                onClick={ toggleSidebar }
-              />) }
               <CenteredContent>
                 { this.store.updatingContent ? (
                   <AtlasPreviewLoading />

src/scenes/DocumentScene/DocumentScene.scss

@@ -14,15 +14,24 @@
   position: relative;
 }
 
-.menuIcon {
-  position: absolute;
-  top: 22px;
-  left: 17px;
-  height: 28px;
-  opacity: 0.15;
+.sidebarToggle {
+  display: flex;
+  position: relative;
+  width: 60px;
   cursor: pointer;
+  justify-content: center;
 
   &:hover {
-    opacity: 1;
+    background-color: #f5f5f5;
+
+    .menuIcon {
+      opacity: 1;
+    }
   }
 }
+
+.menuIcon {
+  margin-top: 18px;
+  height: 28px;
+  opacity: 0.15;
+}