Added navigation drawer with list of collections. Closes #71

src/actions/findbar.js

@@ -10,6 +10,10 @@ export function run(commandName, payload) {
   return { type: RUN_COMMAND, command: commandName, payload };
 }
 
+export function navigateToCollection(collectionName) {
+  return runCommand(SHOW_COLLECTION, { collectionName });
+}
+
 export function createNewEntryInCollection(collectionName) {
   return runCommand(CREATE_COLLECTION, { collectionName });
 }

src/containers/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import pluralize from 'pluralize';
 import { connect } from 'react-redux';
-import { Layout, Panel } from 'react-toolbox';
+import { Layout, Panel, NavDrawer, Navigation, Link } from 'react-toolbox';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
@@ -10,6 +10,7 @@ import {
   CREATE_COLLECTION,
   HELP,
   runCommand,
+  navigateToCollection,
   createNewEntryInCollection
 } from '../actions/findbar';
 import { AppHeader, Loader } from '../components/UI/index';
@@ -17,6 +18,10 @@ import styles from './App.css';
 
 class App extends React.Component {
 
+  state = {
+    navDrawerIsVisible: false
+  }
+
   componentDidMount() {
     this.props.dispatch(loadConfig());
   }
@@ -90,8 +95,23 @@ class App extends React.Component {
     return { commands, defaultCommands };
   }
 
+  toggleNavDrawer = () => {
+    this.setState({
+      navDrawerIsVisible: !this.state.navDrawerIsVisible
+    });
+  }
+
   render() {
-    const { user, config, children, collections } = this.props;
+    const { navDrawerIsVisible } = this.state;
+    const {
+      user,
+      config,
+      children,
+      collections,
+      runCommand,
+      navigateToCollection,
+      createNewEntryInCollection
+    } = this.props;
 
     if (config === null) {
       return null;
@@ -112,14 +132,36 @@ class App extends React.Component {
     const { commands, defaultCommands } = this.generateFindBarCommands();
 
     return (
-      <Layout>
+      <Layout theme={styles}>
+        <NavDrawer
+            active={navDrawerIsVisible}
+            scrollY
+            permanentAt="md"
+        >
+          <nav className={styles.nav}>
+            <h1>Collections</h1>
+            <Navigation type='vertical'>
+              {
+                collections.valueSeq().map(collection =>
+                  <Link
+                      key={collection.get('name')}
+                      onClick={navigateToCollection.bind(this, collection.get('name'))}
+                  >
+                    {collection.get('label')}
+                  </Link>
+                )
+              }
+            </Navigation>
+          </nav>
+        </NavDrawer>
         <Panel scrollY>
           <AppHeader
               collections={collections}
               commands={commands}
               defaultCommands={defaultCommands}
-              runCommand={this.props.runCommand}
+              runCommand={runCommand}
-              onCreateEntryClick={this.props.createNewEntryInCollection}
+              onCreateEntryClick={createNewEntryInCollection}
+              toggleNavDrawer={this.toggleNavDrawer}
           />
           <div className={`${styles.alignable} ${styles.main}`}>
             {children}
@@ -143,6 +185,9 @@ function mapDispatchToProps(dispatch) {
     runCommand: (type, payload) => {
       dispatch(runCommand(type, payload));
     },
+    navigateToCollection: (collection) => {
+      dispatch(navigateToCollection(collection));
+    },
     createNewEntryInCollection: (collectionName) => {
       dispatch(createNewEntryInCollection(collectionName));
     }