diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 593262d4..60fd2627 100644 --- a/src/components/Page/Page.js +++ b/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 (
+

{ title }

{ children }
diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css new file mode 100644 index 00000000..b2c2f4ed --- /dev/null +++ b/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; +} diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js new file mode 100644 index 00000000..95a3ed70 --- /dev/null +++ b/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 (); +}; + + +const Topbar = (props, context) => { + const linkProps = { className: css.link }; + + return (
+ Home + Search + Listing page + Profile + Edit profile + Checkout + Inbox + Orders + Sales + Request password + Change password + Manage listings + Account settings + Contact details + Notification settings + Payment methods + Payout preferences + Security + +
); +}; + +Topbar.contextTypes = { router: React.PropTypes.object }; + +export default Topbar; + diff --git a/src/containers/index.js b/src/containers/index.js index 3fb7b7b8..67bfe7bf 100644 --- a/src/containers/index.js +++ b/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, };