Better AppHeader component. WIP.

src/components/UI/AppHeader/AppHeader.css

@@ -0,0 +1,17 @@
+:root {
+  --foregroundColor: #fff;
+  --backgroundColor: #272e30;
+  --textFieldBorderColor: #e7e7e7;
+  --highlightFGColor: #fff;
+  --highlightBGColor: #3ab7a5;
+}
+
+.appBar {
+  background-color: var(--backgroundColor);
+}
+
+.createBtn {
+  position: fixed;
+  right: 2rem;
+  top: 3.5rem;
+}

src/components/UI/AppHeader/AppHeader.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import pluralize from 'pluralize';
+import { IndexLink } from 'react-router';
+import { Menu, MenuItem, Button } from 'react-toolbox';
+import AppBar from 'react-toolbox/lib/app_bar';
+import FindBar from '../../../containers/FindBar';
+import styles from './AppHeader.css';
+
+export default class AppHeader extends React.Component {
+
+  // props: {
+  //   // collections: React.,
+  //   // commands,
+  //   // defaultCommands
+  // }
+
+  state = {
+    createMenuActive: false
+  }
+
+  handleCreatePostClick = collectionName => {
+    const { onCreateEntryClick } = this.props;
+    if (onCreateEntryClick) {
+      onCreateEntryClick(collectionName);
+    }
+  }
+
+  onCreateButtonClick = () => {
+    this.setState({
+      createMenuActive: true
+    });
+  }
+
+  onCreateMenuHide = () => {
+    this.setState({
+      createMenuActive: false
+    });
+  }
+
+  render() {
+    const { collections, commands, defaultCommands } = this.props;
+    const { createMenuActive } = this.state;
+
+    return (
+      <AppBar
+          fixed
+          theme={styles}
+      >
+        <IndexLink to="/">
+          Dashboard
+        </IndexLink>
+        <FindBar
+            commands={commands}
+            defaultCommands={defaultCommands}
+        />
+        <Button
+            className={styles.createBtn}
+            icon='add'
+            floating
+            accent
+            onClick={this.onCreateButtonClick}
+        >
+          <Menu
+              active={createMenuActive}
+              position="topRight"
+              onHide={this.onCreateMenuHide}
+          >
+            {
+              collections.map(collection =>
+                <MenuItem
+                    key={collection.get('name')}
+                    value={collection.get('name')}
+                    onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
+                    caption={pluralize(collection.get('label'), 1)}
+                />
+              )
+            }
+          </Menu>
+        </Button>
+      </AppBar>
+    );
+  }
+}

src/components/UI/index.js

@@ -2,3 +2,4 @@ export { default as Card } from './card/Card';
 export { default as Loader } from './loader/Loader';
 export { default as Icon } from './icon/Icon';
 export { default as Toast } from './toast/Toast';
+export { default as AppHeader } from './AppHeader/AppHeader';

src/containers/App.js

@@ -1,21 +1,21 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { IndexLink } from 'react-router';
 import pluralize from 'pluralize';
+import { connect } from 'react-redux';
+import { Layout, Panel } from 'react-toolbox';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
-import { Loader } from '../components/UI';
 import {
   SHOW_COLLECTION,
   CREATE_COLLECTION,
   HELP,
   createNewEntryInCollection
 } from '../actions/findbar';
-import FindBar from './FindBar';
+import { AppHeader, Loader } from '../components/UI';
 import styles from './App.css';
 
 class App extends React.Component {
+
   componentDidMount() {
     this.props.dispatch(loadConfig());
   }
@@ -68,7 +68,7 @@ class App extends React.Component {
         id: `show_${collection.get('name')}`,
         pattern: `Show ${pluralize(collection.get('label'))}`,
         type: SHOW_COLLECTION,
-        payload: { collectionName:collection.get('name') }
+        payload: { collectionName: collection.get('name') }
       });
 
       if (defaultCommands.length < 5) defaultCommands.push(`show_${collection.get('name')}`);
@@ -78,7 +78,7 @@ class App extends React.Component {
           id: `create_${collection.get('name')}`,
           pattern: `Create new ${pluralize(collection.get('label'), 1)}(:itemName as ${pluralize(collection.get('label'), 1)} Name)`,
           type: CREATE_COLLECTION,
-          payload: { collectionName:collection.get('name') }
+          payload: { collectionName: collection.get('name') }
         });
       }
     });
@@ -89,7 +89,7 @@ class App extends React.Component {
     return { commands, defaultCommands };
   }
 
-  handleCreatePostClick = collectionName => {
+  onCreateEntryClick = collectionName => {
     this.props.dispatch(
       createNewEntryInCollection(collectionName)
     );
@@ -117,32 +117,19 @@ class App extends React.Component {
     const { commands, defaultCommands } = this.generateFindBarCommands();
 
     return (
-      <div>
-        <header className={styles.header}>
-          <IndexLink to="/" className={styles.homeLink}>
-            Dashboard
-          </IndexLink>
-          <div className={styles.findBar}>
-            <FindBar
-                commands={commands}
-                defaultCommands={defaultCommands}
-            />
+      <Layout>
+        <Panel scrollY>
+          <AppHeader
+              collections={collections}
+              commands={commands}
+              defaultCommands={defaultCommands}
+              onCreateEntryClick={this.onCreateEntryClick}
+          />
+          <div className={`${styles.alignable} ${styles.main}`}>
+            {children}
           </div>
-          <div className={styles.actions}>
-            {
-              collections.map(collection =>
-                <button
-                    onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
-                >
-                  + {pluralize(collection.get('label'), 1)}
-                </button>)
-            }
-          </div>
-        </header>
-        <div className={styles.main}>
-          {children}
-        </div>
-      </div>
+        </Panel>
+      </Layout>
     );
   }
 }