Sidebar editing toggle and only scroll atlas content

frontend/scenes/Application.js

@@ -1,15 +1,18 @@
-import React from "react";
+import React from 'react';
 import { observer } from 'mobx-react';
-import Helmet from "react-helmet";
+import Helmet from 'react-helmet';
 
 const Application = observer((props) => {
   return (
-    <div style={{ width: '100%', display: 'flex', flex: 1, }}>
+    <div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>
       <Helmet
         title="Atlas"
-        meta={[
-          {"name": "viewport", "content": "width=device-width, initial-scale=1.0"},
-        ]}
+        meta={ [
+          {
+            name: 'viewport',
+            content: 'width=device-width, initial-scale=1.0',
+          },
+        ] }
       />
       { props.children }
     </div>
@@ -18,6 +21,6 @@ const Application = observer((props) => {
 
 Application.propTypes = {
   children: React.PropTypes.node.isRequired,
-}
+};
 
 export default Application;

frontend/scenes/DocumentScene/DocumentScene.js

@@ -175,7 +175,7 @@ class DocumentScene extends React.Component {
                 onNodeCollapse={ this.store.onNodeCollapse }
               />
             ) }
-            <Flex flex justify="center" className={ styles.content }>
+            <Flex auto justify="center" className={ styles.content }>
               <CenteredContent>
                 { this.store.updatingContent ? (
                   <AtlasPreviewLoading />

frontend/scenes/DocumentScene/DocumentScene.scss

@@ -5,4 +5,5 @@
 
 .content {
   position: relative;
+  overflow: scroll;
 }

frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js

@@ -8,10 +8,14 @@ import styles from './Sidebar.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
 
-import treeStyles from 'components/Tree/Tree.scss';
+import SidebarStore from './SidebarStore';
+
+// import treeStyles from 'components/Tree/Tree.scss';
 
 @observer
 class Sidebar extends React.Component {
+  static store;
+
   static propTypes = {
     open: PropTypes.bool,
     onToggle: PropTypes.func.isRequired,
@@ -20,27 +24,39 @@ class Sidebar extends React.Component {
     onNodeCollapse: PropTypes.func.isRequired,
   }
 
-  renderNode = (node) => {
-    return (
-      <span className={ treeStyles.nodeLabel } onClick={ this.onClickNode.bind(null, node) }>
-        { node.module.name }
-      </span>
-    );
+  constructor(props) {
+    super(props);
+
+    this.store = new SidebarStore();
+  }
+
+  toggleEdit = (e) => {
+    e.preventDefault();
+    this.store.toggleEdit();
   }
 
   render() {
     return (
       <Flex>
         { this.props.open && (
-          <div className={ cx(styles.sidebar) }>
-            <Tree
-              paddingLeft={ 10 }
-              tree={ this.props.navigationTree }
-              onChange={ this.props.onNavigationUpdate }
-              onCollapse={ this.props.onNodeCollapse }
-              renderNode={ this.renderNode }
-            />
-          </div>
+          <Flex column className={ cx(styles.sidebar) }>
+            <Flex auto className={ cx(styles.content) }>
+              <Tree
+                paddingLeft={ 10 }
+                tree={ this.props.navigationTree }
+                allowUpdates={ this.store.isEditing }
+                onChange={ this.props.onNavigationUpdate }
+                onCollapse={ this.props.onNodeCollapse }
+              />
+            </Flex>
+            <Flex auto className={ styles.actions }>
+              <a
+                href
+                onClick={ this.toggleEdit }
+                className={ cx(styles.action, { active: this.store.isEditing }) }
+              >Edit</a>
+            </Flex>
+          </Flex>
         ) }
         <div
           onClick={ this.props.onToggle }

frontend/scenes/DocumentScene/components/Sidebar/Sidebar.scss

@@ -1,7 +1,8 @@
-.sidebar {
-  width: 250px;
-  padding: 20px 20px 20px 5px;
+@import '~styles/constants.scss';
 
+.sidebar {
+  position: relative;
+  width: 250px;
   border-right: 1px solid #eee;
 }
 
@@ -26,3 +27,30 @@
   height: 28px;
   opacity: 0.15;
 }
+
+.content {
+  padding: 20px 20px 20px 5px;
+}
+
+.tree {
+
+}
+
+.actions {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 10px 20px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.action {
+  color: $darkGray;
+
+  &.active {
+    color: $textColor;
+  }
+}

frontend/scenes/DocumentScene/components/Sidebar/SidebarStore.js

@@ -0,0 +1,13 @@
+import { observable, action } from 'mobx';
+
+class SidebarStore {
+  @observable isEditing = false;
+
+  /* Actions */
+
+  @action toggleEdit = () => {
+    this.isEditing = !this.isEditing;
+  }
+}
+
+export default SidebarStore;