User auth info from store, put links into a dropdown

src/containers/Topbar/Topbar.css

@@ -2,12 +2,31 @@
   display: flex;
   background-color: #f9f9f9;
   flex-direction: row;
+  padding: 0 1rem;
   width: 100vw;
   height: 80px;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 }
 
-.link {
-  margin: 0 10px;
+.home {
+  font-size: 2rem;
+}
+
+.navDropDown {
+  height: 60px;
+  font-size: 2rem;
+  border-radius: 0;
+  appearance: none;
+  margin-left: 1rem;
+  outline: none;
+}
+
+.user {
+  min-width: 15rem;
+  text-align: right;
+}
+
+.logoutButton {
+  margin: 0;
 }

src/containers/Topbar/Topbar.js

@@ -1,48 +1,69 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router';
-import { fakeAuth } from '../../Routes';
+import { logout } from '../../ducks/Auth.ducks';
+
 import css from './Topbar.css';
 
-const SignoutButton = props => {
-  const { router } = props;
-  const handleClick = () => {
-    fakeAuth.signout(() => {
-      router.transitionTo('/');
-    });
-  };
-  return <button onClick={handleClick}>Sign out</button>;
-};
-
-const { any } = PropTypes;
-
-SignoutButton.propTypes = { router: any.isRequired };
-
 const Topbar = (props, context) => {
-  const linkProps = { className: css.link };
+  const { isAuthenticated, onLogout, user } = props;
+  const house = { dangerouslySetInnerHTML: { __html: '&#127968;' } };
+  const hamburger = { dangerouslySetInnerHTML: { __html: '&#127828;' } };
+
+  const handleChange = e => {
+    const value = e.target.value;
+    context.router.transitionTo(value);
+  };
 
   return (
     <div className={css.container}>
-      <Link to="/" {...linkProps}>Home</Link>
-      <Link to="/s" {...linkProps}>Search</Link>
-      <Link to="/l/Bike-Pelago/12345" {...linkProps}>Listing page</Link>
-      <Link to="/u/Bikerrs" {...linkProps}>Profile</Link>
-      <Link to="/u/Bikerrs/edit" {...linkProps}>Edit profile</Link>
-      <Link to="/checkout/lid1234" {...linkProps}>Checkout</Link>
-      <Link to="/inbox" {...linkProps}>Inbox</Link>
-      <Link to="/orders" {...linkProps}>Orders</Link>
-      <Link to="/sales" {...linkProps}>Sales</Link>
-      <Link to="/password/forgotten" {...linkProps}>Request password</Link>
-      <Link to="/password/change" {...linkProps}>Change password</Link>
-      <Link to="/listings" {...linkProps}>Manage listings</Link>
-      <Link to="/account" {...linkProps}>Account settings</Link>
-      <Link to="/account/contact-details" {...linkProps}>Contact details</Link>
-      <Link to="/account/payout-preferences" {...linkProps}>Payout preferences</Link>
-      <Link to="/account/security" {...linkProps}>Security</Link>
-      {fakeAuth.isAuthenticated ? <SignoutButton router={context.router} /> : null}
+      <div>
+        <Link className={css.home} to="/" {...house} />
+        <select value="default" className={css.navDropDown} onChange={handleChange}>
+          <option value="default" {...hamburger} />
+          <option value="/s">Search</option>
+          <option value="/l/Bike-Pelago/12345">Listing page</option>
+          <option value="/u/Bikerrs">Profile</option>
+          <option value="/u/Bikerrs/edit">Edit profile</option>
+          <option value="/checkout/lid1234">Checkout</option>
+          <option value="/inbox">Inbox</option>
+          <option value="/orders">Orders</option>
+          <option value="/sales">Sales</option>
+          <option value="/password/forgotten">Request password</option>
+          <option value="/password/change">Change password</option>
+          <option value="/listings">Manage listings</option>
+          <option value="/account">Account settings</option>
+          <option value="/account/contact-details">Contact details</option>
+          <option value="/account/payout-preferences">Payout preferences</option>
+          <option value="/account/security">Security</option>
+        </select>
+      </div>
+      <div className={css.user}>
+        {isAuthenticated
+          ? <div>
+              Logged in as{' '}
+              {user.email}
+              <button className={css.logoutButton} onClick={onLogout}>Logout</button>
+            </div>
+          : <Link to="/login">Login</Link>}
+      </div>
     </div>
   );
 };
 
-Topbar.contextTypes = { router: React.PropTypes.object };
+Topbar.defaultProps = { user: null };
 
-export default Topbar;
+const { bool, object, func, any } = PropTypes;
+
+Topbar.propTypes = { isAuthenticated: bool.isRequired, user: object, onLogout: func.isRequired };
+
+Topbar.contextTypes = { router: any };
+
+const mapStateToProps = state => ({
+  isAuthenticated: state.Auth.isAuthenticated,
+  user: state.Auth.user,
+});
+
+const mapDispatchToProps = dispatch => ({ onLogout: () => dispatch(logout()) });
+
+export default connect(mapStateToProps, mapDispatchToProps)(Topbar);