Secondary navigation: UserNav. It will be used in desktop mode on current user related pages

src/components/UserNav/UserNav.css

@@ -0,0 +1,32 @@
+@import '../../marketplace.css';
+
+.root {
+  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/components/UserNav/UserNav.js

@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { TabNavHorizontal } from '../../components';
+
+import css from './UserNav.css';
+
+const UserNav = props => {
+  const { className, rootClassName, selectedPageName } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  const tabs = [
+    {
+      text: <FormattedMessage id="ManageListingsPage.profileSettings" />,
+      selected: selectedPageName === 'EditProfilePage',
+      disabled: true,
+      linkProps: {
+        name: 'EditProfilePage',
+        params: { displayName: 'testinglink' },
+      },
+    },
+    {
+      text: <FormattedMessage id="ManageListingsPage.accountSettings" />,
+      selected: selectedPageName === 'AccountPage',
+      disabled: true,
+      linkProps: {
+        name: 'AccountPage',
+      },
+    },
+    {
+      text: <FormattedMessage id="ManageListingsPage.yourListings" />,
+      selected: selectedPageName === 'ManageListingsPage',
+      linkProps: {
+        name: 'ManageListingsPage',
+      },
+    },
+  ];
+
+  return (
+    <TabNavHorizontal className={classes} tabRootClassName={css.tab} tabs={tabs} skin="dark" />
+  );
+};
+
+UserNav.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { string } = PropTypes;
+
+UserNav.propTypes = {
+  className: string,
+  rootClassName: string,
+  selectedPageName: string.isRequired,
+};
+
+export default UserNav;

src/components/index.js

@@ -56,6 +56,7 @@ import TextInputField from './TextInputField/TextInputField';
 import Topbar from './Topbar/Topbar';
 import TopbarDesktop from './TopbarDesktop/TopbarDesktop';
 import TopbarMobileMenu from './TopbarMobileMenu/TopbarMobileMenu';
+import UserNav from './UserNav/UserNav';
 import ValidationError from './ValidationError/ValidationError';
 
 export {
@@ -120,5 +121,6 @@ export {
   Topbar,
   TopbarDesktop,
   TopbarMobileMenu,
+  UserNav,
   ValidationError,
 };

src/containers/ManageListingsPage/ManageListingsPage.js

@@ -6,7 +6,7 @@ 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, TabNavHorizontal } from '../../components';
+import { PageLayout, Topbar, UserNav } from '../../components';
 
 import css from './ManageListingsPage.css';
 
@@ -25,33 +25,6 @@ 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
@@ -66,8 +39,7 @@ export const ManageListingsPageComponent = props => {
         onLogout={onLogout}
         onManageDisableScrolling={onManageDisableScrolling}
       />
-      <TabNavHorizontal className={css.tabs} tabRootClassName={css.tab} tabs={tabs} skin="dark" />
-
+      <UserNav selectedPageName="ManageListingsPage" />
     </PageLayout>
   );
 };

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

@@ -22,47 +22,9 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
     notificationCount={0}
     onLogout={[Function]}
     onManageDisableScrolling={[Function]} />
-  <TabNavHorizontal
+  <UserNav
     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 {}} />,
-        },
-      ]
-    } />
+    selectedPageName="ManageListingsPage" />
 </withRouter(PageLayout)>
 `;