Renamed /src to /frontend

frontend/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.node.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,
+}

frontend/components/DropdownMenu/DropdownMenu.scss

@@ -0,0 +1,51 @@
+@import '~styles/constants.scss';
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  min-height: 43px;
+  margin: 0 5px;
+  color: $actionColor;
+}
+
+.menuContainer {
+  position: relative;
+
+  .menu {
+    position: absolute;
+    top: $headerHeight;
+    right: 0;
+    z-index: 1000;
+    border: 1px solid #eee;
+    background-color: #fff;
+    min-width: 150px;
+  }
+}
+
+.menuItem {
+  margin: 0;
+  padding: 5px 10px;
+  height: 32px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+
+  span {
+    margin-top: 2px;
+  }
+
+  a {
+    color: $textColor;
+    text-decoration: none;
+  }
+
+  &:hover {
+    border-left: 2px solid $actionColor;
+  }
+}

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import styles from './MoreIcon.scss';
+
+const MoreIcon = (props) => {
+  return (
+    <img
+      src={ require("./assets/more.svg") }
+      className={ styles.icon }
+    />
+  );
+};
+
+export default MoreIcon;

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss

@@ -0,0 +1,4 @@
+.icon {
+  width: 21px;
+  margin-top: 6px;
+}

frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg

@@ -0,0 +1 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>

frontend/components/DropdownMenu/components/MoreIcon/index.js

@@ -0,0 +1,2 @@
+import MoreIcon from './MoreIcon';
+export default MoreIcon;

frontend/components/DropdownMenu/index.js

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