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,7 +139,9 @@ class DocumentScene extends React.Component {
           </CenteredContent>
         ) : (
           <Flex flex={ true }>
-            { this.store.isAtlas && sidebar && (
+            { this.store.isAtlas && (
+              <Flex>
+                { sidebar && (
                   <div className={ styles.sidebar }>
                     <Tree
                       paddingLeft={ 10 }
@@ -151,12 +153,15 @@ class DocumentScene extends React.Component {
                     />
                   </div>
                 ) }
-            <Flex flex={ true } justify={ 'center' } className={ styles.content}>
+                <div className={ styles.sidebarToggle } onClick={ toggleSidebar }>
-              { this.store.isAtlas && (<img
+                  <img
                     src={ require("assets/icons/menu.svg") }
                     className={ styles.menuIcon }
-                onClick={ toggleSidebar }
+                  />
-              />) }
+                </div>
+              </Flex>
+            ) }
+            <Flex flex={ true } justify={ 'center' } className={ styles.content}>
               <CenteredContent>
                 { this.store.updatingContent ? (
                   <AtlasPreviewLoading />

src/scenes/DocumentScene/DocumentScene.scss

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