Empty ManageListingsPage with secondary navigation bar

src/containers/InboxPage/InboxPage.js

@@ -249,6 +249,7 @@ export const InboxPageComponent = props => {
         authInProgress={authInProgress}
         currentUser={currentUser}
         currentUserHasListings={currentUserHasListings}
+        currentPage="InboxPage"
         notificationCount={providerNotificationCount}
         history={history}
         location={location}

src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap

@@ -6,6 +6,7 @@ exports[`InboxPage matches snapshot 1`] = `
   title="InboxPage.ordersTitle">
   <Topbar
     authInProgress={false}
+    currentPage="InboxPage"
     currentUser={null}
     currentUserHasListings={false}
     history={
@@ -307,6 +308,7 @@ exports[`InboxPage matches snapshot 3`] = `
   title="InboxPage.salesTitle">
   <Topbar
     authInProgress={false}
+    currentPage="InboxPage"
     currentUser={null}
     currentUserHasListings={false}
     history={

src/containers/ManageListingsPage/ManageListingsPage.css

@@ -0,0 +1,35 @@
+@import '../../marketplace.css';
+
+.root {
+}
+
+.tabs {
+  display: none;
+
+  @media (--viewportMedium) {
+    display: flex;
+    justify-content: flex-end;
+    height: 55px;
+    align-items: flex-end;
+    padding: 13px 24px 0 24px;
+  }
+
+  @media (--viewportLarge) {
+    padding: 0 36px;
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  margin-left: 16px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  @media (--viewportLarge) {
+    margin-left: 24px;
+  }
+}

src/containers/ManageListingsPage/ManageListingsPage.js

@@ -1,11 +1,14 @@
 import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import * as propTypes from '../../util/propTypes';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
-import { PageLayout, Topbar } from '../../components';
+import { PageLayout, Topbar, TabNavHorizontal } from '../../components';
+
+import css from './ManageListingsPage.css';
 
 export const ManageListingsPageComponent = props => {
   const {
@@ -22,12 +25,40 @@ export const ManageListingsPageComponent = props => {
     onManageDisableScrolling,
   } = props;
 
+  const tabs = [
+    {
+      text: <FormattedMessage id="ManageListingsPage.profileSettings" />,
+      selected: false,
+      disabled: true,
+      linkProps: {
+        name: 'EditProfilePage',
+        params: { displayName: 'testinglink' },
+      },
+    },
+    {
+      text: <FormattedMessage id="ManageListingsPage.accountSettings" />,
+      selected: false,
+      disabled: true,
+      linkProps: {
+        name: 'AccountPage',
+      },
+    },
+    {
+      text: <FormattedMessage id="ManageListingsPage.yourListings" />,
+      selected: true,
+      linkProps: {
+        name: 'ManageListingsPage',
+      },
+    },
+  ];
+
   return (
     <PageLayout authInfoError={authInfoError} logoutError={logoutError} title="Manage listings">
       <Topbar
         authInProgress={authInProgress}
         currentUser={currentUser}
         currentUserHasListings={currentUserHasListings}
+        currentPage="ManageListingsPage"
         history={history}
         isAuthenticated={isAuthenticated}
         location={location}
@@ -35,6 +66,8 @@ export const ManageListingsPageComponent = props => {
         onLogout={onLogout}
         onManageDisableScrolling={onManageDisableScrolling}
       />
+      <TabNavHorizontal className={css.tabs} tabRootClassName={css.tab} tabs={tabs} skin="dark" />
+
     </PageLayout>
   );
 };

src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap

@@ -5,6 +5,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
   title="Manage listings">
   <Topbar
     authInProgress={false}
+    currentPage="ManageListingsPage"
     currentUser={null}
     currentUserHasListings={false}
     history={
@@ -21,5 +22,47 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
     notificationCount={0}
     onLogout={[Function]}
     onManageDisableScrolling={[Function]} />
+  <TabNavHorizontal
+    className={null}
+    rootClassName={null}
+    skin="dark"
+    tabClassName={null}
+    tabRootClassName={null}
+    tabs={
+      Array [
+        Object {
+          "disabled": true,
+          "linkProps": Object {
+            "name": "EditProfilePage",
+            "params": Object {
+              "displayName": "testinglink",
+            },
+          },
+          "selected": false,
+          "text": <FormattedMessage
+            id="ManageListingsPage.profileSettings"
+            values={Object {}} />,
+        },
+        Object {
+          "disabled": true,
+          "linkProps": Object {
+            "name": "AccountPage",
+          },
+          "selected": false,
+          "text": <FormattedMessage
+            id="ManageListingsPage.accountSettings"
+            values={Object {}} />,
+        },
+        Object {
+          "linkProps": Object {
+            "name": "ManageListingsPage",
+          },
+          "selected": true,
+          "text": <FormattedMessage
+            id="ManageListingsPage.yourListings"
+            values={Object {}} />,
+        },
+      ]
+    } />
 </withRouter(PageLayout)>
 `;

src/translations/en.json

@@ -154,6 +154,9 @@
   "LoginForm.passwordLabel": "Password",
   "LoginForm.passwordPlaceholder": "Enter your password…",
   "LoginForm.passwordRequired": "This field is required",
+  "ManageListingsPage.accountSettings": "Acccount settings",
+  "ManageListingsPage.profileSettings": "Profile settings",
+  "ManageListingsPage.yourListings": "Your listings",
   "MapPriceMarker.unsupportedPrice": "({currency})",
   "Modal.close": "CLOSE",
   "Modal.closeModal": "Close modal",