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';