Simple header menu

src/actions/SlackAuthAction.js

@@ -1,5 +1,5 @@
 import makeActionCreator from '../utils/actions';
-import { push } from 'react-router-redux';
+import { replace } from 'react-router-redux';
 import { client } from 'utils/ApiClient';
 import auth from 'utils/auth';
 
@@ -25,7 +25,7 @@ export function slackAuthAsync(code) {
       auth.setToken(data.data.accessToken);
       dispatch(updateUser(data.data.user));
       dispatch(updateTeam(data.data.team));
-      dispatch(push('/dashboard'));
+      dispatch(replace('/dashboard'));
     })
     // .catch((err) => {
     //   dispatch(push('/error'));

src/actions/UserActions.js

@@ -1,5 +1,15 @@
+import { push } from 'react-router-redux';
+import auth from 'utils/auth';
+
 import makeActionCreator from '../utils/actions';
 
 export const UPDATE_USER = 'UPDATE_USER';
 
 export const updateUser = makeActionCreator(UPDATE_USER, 'user');
+
+export function logoutUser() {
+  return (dispatch) => {
+    auth.logout();
+    dispatch(push('/'));
+  };
+};

src/components/Layout/Layout.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import HeaderMenu from './components/HeaderMenu';
+
 import styles from './Layout.scss';
 
 class Layout extends React.Component {
@@ -13,9 +15,9 @@ class Layout extends React.Component {
       <div className={ styles.container }>
         <div className={ styles.header }>
           <div className={ styles.teamName }>Coinbase</div>
-          <div className={ styles.user }>
+          <HeaderMenu>
             <img src={ this.props.avatarUrl } />
-          </div>
+          </HeaderMenu>
         </div>
         <div className={ styles.content }>
           { this.props.children }
@@ -31,4 +33,6 @@ const mapStateToProps = (state) => {
   }
 };
 
-export default connect(mapStateToProps)(Layout);
+export default connect(
+  mapStateToProps,
+)(Layout);

src/components/Layout/Layout.scss

@@ -21,15 +21,7 @@
   font-weight: bold;
 }
 
-.user {
-
-  img {
-    height: 24px;
-    width: 24px;
-    border-radius: 12px;
-  }
-}
-
 .content {
-  flex: 1;
-}
+  display: flex;
+  justify-content: center;
+}

src/components/Layout/components/HeaderMenu/HeaderMenu.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { logoutUser } from 'actions/UserActions';
+
+import styles from './HeaderMenu.scss';
+
+class HeaderMenu extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.node.isRequired,
+  }
+
+  state = {
+    menuVisible: false,
+  }
+
+  onMouseEnter = () => {
+    this.setState({ menuVisible: true });
+  }
+
+  onMouseLeave = () => {
+    this.setState({ menuVisible: false });
+  }
+
+  logout = (event) => {
+    event.preventDefault();
+    this.props.logout();
+  }
+
+  render() {
+    return (
+      <div
+        className={ styles.menu }
+        onMouseEnter={ this.onMouseEnter }
+        onMouseLeave={ this.onMouseLeave }
+      >
+        <div className={ styles.content }>
+          { this.props.children }
+        </div>
+
+        { this.state.menuVisible ? (
+          <div className={ styles.menu }>
+            <ul>
+              <li>
+                <a href='/' onClick={ this.logout }>Logout</a>
+              </li>
+            </ul>
+          </div>
+        ) : null }
+      </div>
+    );
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    logout: () => {
+      dispatch(logoutUser())
+    },
+  }
+};
+
+
+export default connect(null, mapDispatchToProps)(HeaderMenu);

src/components/Layout/components/HeaderMenu/HeaderMenu.scss

@@ -0,0 +1,50 @@
+@import '../../../../utils/constants.scss';
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 43px;
+  min-width: 43px;
+}
+
+.menu {
+  position: relative;
+
+  img {
+    height: 24px;
+    width: 24px;
+    border-radius: 12px;
+  }
+
+  .menu {
+    position: absolute;
+    top: 42px;
+    right: 0;
+    z-index: 1000;
+    border: 1px solid #eee;
+
+    ul {
+      margin: 0;
+      padding: 5px 0;
+      font-size: 0.9em;
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      a {
+        display: flex;
+        margin: 0;
+        padding: 5px 10px;
+        min-width: 150px;
+
+        color: $textColor;
+        text-decoration: none;
+      }
+    }
+  }
+}

src/components/Layout/components/HeaderMenu/index.js

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

src/utils/base-styles.scss

@@ -1,3 +1,5 @@
+@import './constants.scss';
+
 * {
   box-sizing: border-box;
 }
@@ -10,6 +12,7 @@ html, body, .viewport {
 
 html, body {
   font-family: 'Atlas Grotesk', 'Helvetica Neue', sans-serif;
+  color: $textColor;
 }
 
 a {

src/utils/constants.scss

@@ -0,0 +1,5 @@
+$textColor: #171B35;
+
+:export {
+  textColor: $textColor;
+}