Sidebar editing toggle and only scroll atlas content

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;