Topbar placeholder added to Page layout

src/components/Page/Page.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import Helmet from 'react-helmet';
+import { Topbar } from '../../containers';
 
 export default (props) => {
   const { className, title, children } = props;
   return (
     <div className={ className }>
       <Helmet title={ title } />
+      <Topbar />
       <h1>{ title }</h1>
       { children }
     </div>

src/containers/Topbar/Topbar.css

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  background-color: #f9f9f9;
+  flex-direction: row;
+  width: 100vw;
+  height: 80px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.link {
+  margin: 0 10px;
+}

src/containers/Topbar/Topbar.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { fakeAuth } from '../../Routes';
+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 Topbar = (props, context) => {
+  const linkProps = { className: css.link };
+
+  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/notifications" { ...linkProps } >Notification settings</Link>
+    <Link to="/account/payment-methods" { ...linkProps } >Payment methods</Link>
+    <Link to="/account/payout-preferences" { ...linkProps } >Payout preferences</Link>
+    <Link to="/account/security" { ...linkProps } >Security</Link>
+    <SignoutButton router={ context.router } />
+  </div>);
+};
+
+Topbar.contextTypes = { router: React.PropTypes.object };
+
+export default Topbar;
+

src/containers/index.js

@@ -18,6 +18,7 @@ import SalesConversationPage from './SalesConversationPage/SalesConversationPage
 import SearchPage from './SearchPage/SearchPage';
 import SecurityPage from './SecurityPage/SecurityPage';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
+import Topbar from './Topbar/Topbar';
 
 export {
   AuthenticationPage,
@@ -40,4 +41,5 @@ export {
   SearchPage,
   SecurityPage,
   NotFoundPage,
+  Topbar,
 };