Moved sidebar to its own component

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

@@ -0,0 +1,61 @@
+import React, { PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
+import { Flex } from 'reflexbox';
+import Tree from 'components/Tree';
+
+import styles from './Sidebar.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+import treeStyles from 'components/Tree/Tree.scss';
+
+@observer
+class Sidebar extends React.Component {
+  static propTypes = {
+    open: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+    navigationTree: PropTypes.object.isRequired,
+    onNavigationUpdate: PropTypes.func.isRequired,
+    onNodeCollapse: PropTypes.func.isRequired,
+  }
+
+  renderNode = (node) => {
+    return (
+      <span className={ treeStyles.nodeLabel } onClick={ this.onClickNode.bind(null, node) }>
+        { node.module.name }
+      </span>
+    );
+  }
+
+  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>
+        ) }
+        <div
+          onClick={ this.props.onToggle }
+          className={ styles.sidebarToggle }
+          title="Toggle sidebar (Cmd+/)"
+        >
+          <img
+            src={ require("assets/icons/menu.svg") }
+            className={ styles.menuIcon }
+            alt="Menu"
+          />
+        </div>
+      </Flex>
+    );
+  }
+}
+
+export default Sidebar;

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

@@ -0,0 +1,28 @@
+.sidebar {
+  width: 250px;
+  padding: 20px 20px 20px 5px;
+
+  border-right: 1px solid #eee;
+}
+
+.sidebarToggle {
+  display: flex;
+  position: relative;
+  width: 60px;
+  cursor: pointer;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f5f5f5;
+
+    .menuIcon {
+      opacity: 1;
+    }
+  }
+}
+
+.menuIcon {
+  margin-top: 18px;
+  height: 28px;
+  opacity: 0.15;
+}

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

@@ -0,0 +1,2 @@
+import Sidebar from './Sidebar';
+export default Sidebar;