From c95969a5cb5f5266f2f9ba69914585e749451838 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Thu, 11 Aug 2016 20:10:55 +0200
Subject: [PATCH] Nicer sidebar actions

---
 .../DocumentScene/components/Sidebar/Sidebar.js   | 13 ++++++++++++-
 .../Sidebar/components/Separator/Separator.js     | 15 +++++++++++++++
 .../Sidebar/components/Separator/Separator.scss   |  6 ++++++
 .../Sidebar/components/Separator/index.js         |  2 ++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.js
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.scss
 create mode 100644 frontend/scenes/DocumentScene/components/Sidebar/components/Separator/index.js

diff --git a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
index 13f3ef748..bd4a3a305 100644
--- a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
+++ b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js
@@ -1,8 +1,10 @@
 import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
+import { Link } from 'react-router';
 
 import { Flex } from 'reflexbox';
 import Tree from 'components/Tree';
+import Separator from './components/Separator';
 
 import styles from './Sidebar.scss';
 import classNames from 'classnames/bind';
@@ -36,6 +38,8 @@ class Sidebar extends React.Component {
   }
 
   render() {
+    console.log(this.props.navigationTree);
+
     return (
       <Flex>
         { this.props.open && (
@@ -50,11 +54,18 @@ class Sidebar extends React.Component {
               />
             </Flex>
             <Flex auto className={ styles.actions }>
+              <Link
+                to={ `/documents/${this.props.navigationTree.id}/new` }
+                className={ cx(styles.action) }
+              >
+                Add document
+              </Link>
+              <Separator/>
               <a
                 href
                 onClick={ this.toggleEdit }
                 className={ cx(styles.action, { active: this.store.isEditing }) }
-              >Edit</a>
+              >Organize</a>
             </Flex>
           </Flex>
         ) }
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.js b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.js
new file mode 100644
index 000000000..0f35dd494
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './Separator.scss';
+
+class Separator extends React.Component {
+  render() {
+    return (
+      <span className={ styles.separator }>
+        &middot;
+      </span>
+    );
+  }
+}
+
+export default Separator;
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.scss b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.scss
new file mode 100644
index 000000000..7aa44d11e
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/Separator.scss
@@ -0,0 +1,6 @@
+@import '~styles/constants.scss';
+
+.separator {
+  padding: 0 10px;
+  color: $lightGray;
+}
diff --git a/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/index.js b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/index.js
new file mode 100644
index 000000000..f2e3d0bfd
--- /dev/null
+++ b/frontend/scenes/DocumentScene/components/Sidebar/components/Separator/index.js
@@ -0,0 +1,2 @@
+import Separator from './Separator';
+export default Separator;