Unified header menus with components

src/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import styles from './DropdownMenu.scss';
+
+const MenuItem = (props) => {
+  return (
+    <div
+      className={ styles.menuItem }
+      onClick={ props.onClick}
+    >{ props.children }</div>
+  );
+};
+
+MenuItem.propTypes = {
+  onClick: React.PropTypes.func,
+  children: React.PropTypes.node.isRequired,
+};
+
+//
+
+class DropdownMenu extends React.Component {
+  static propTypes = {
+    label: React.PropTypes.string.isRequired,
+    children: React.PropTypes.node.isRequired,
+  }
+
+  state = {
+    menuVisible: false,
+  }
+
+  onMouseEnter = () => {
+    this.setState({ menuVisible: true });
+  }
+
+  onMouseLeave = () => {
+    this.setState({ menuVisible: false });
+  }
+
+  onClick = () => {
+    this.setState({ menuVisible: !this.state.menuVisible });
+  }
+
+  render() {
+    return (
+      <div
+        className={ styles.menuContainer }
+        onMouseEnter={ this.onMouseEnter }
+        onMouseLeave={ this.onMouseLeave }
+      >
+        <div className={ styles.label } onClick={ this.onClick }>
+          { this.props.label }
+        </div>
+
+        { this.state.menuVisible ? (
+          <div className={ styles.menu }>
+            { this.props.children }
+          </div>
+        ) : null }
+      </div>
+    );
+  }
+};
+
+export default DropdownMenu;
+export {
+  MenuItem,
+}

src/components/DropdownMenu/DropdownMenu.scss

@@ -0,0 +1,40 @@
+@import '../../utils/constants.scss';
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  min-height: 43px;
+  padding: 0 0.5rem;
+  color: $linkColor;
+}
+
+.menuContainer {
+  position: relative;
+
+  .menu {
+    position: absolute;
+    top: 42px;
+    right: 0;
+    z-index: 1000;
+    border: 1px solid #eee;
+    min-width: 150px;
+    padding: 5px 0;
+  }
+}
+
+.menuItem {
+  margin: 0;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  a {
+    color: $textColor;
+    text-decoration: none;
+  }
+}

src/components/DropdownMenu/index.js

@@ -0,0 +1,5 @@
+import DropdownMenu, { MenuItem } from './DropdownMenu';
+export default DropdownMenu;
+export {
+  MenuItem,
+};