ContactDetailsPage uses LayoutSideNavigation

src/containers/ContactDetailsPage/ContactDetailsPage.css

@@ -0,0 +1,32 @@
+@import '../../marketplace.css';
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  min-height: 48px;
+
+  @media (--viewportMedium) {
+    min-height: 56px;
+  }
+
+  @media (--viewportLarge) {
+    min-height: auto;
+    flex-direction: column;
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  margin-left: 16px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  @media (--viewportLarge) {
+    margin-left: 0;
+  }
+}

src/containers/ContactDetailsPage/ContactDetailsPage.js

@@ -2,11 +2,14 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { sendVerificationEmail } from '../../ducks/user.duck';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
-import { PageLayout, Topbar } from '../../components';
+import { LayoutSideNavigation, PageLayout, Topbar, UserNav, TabNav } from '../../components';
+
+import css from './ContactDetailsPage.css';
 
 export const ContactDetailsPageComponent = props => {
   const {
@@ -27,10 +30,28 @@ export const ContactDetailsPageComponent = props => {
     onResendVerificationEmail,
   } = props;
 
+  const tabs = [
+    {
+      text: <FormattedMessage id="ContactDetailsPage.emailTabTitle" />,
+      selected: true,
+      linkProps: {
+        name: 'ContactDetailsPage',
+      },
+    },
+    {
+      text: <FormattedMessage id="ContactDetailsPage.passwordTabTitle" />,
+      selected: false,
+      linkProps: {
+        name: 'PasswordChangePage',
+      },
+    },
+  ];
+
   return (
     <PageLayout authInfoError={authInfoError} logoutError={logoutError} title="Contact details">
       <Topbar
         authInProgress={authInProgress}
+        currentPage="ContactDetailsPage"
         currentUser={currentUser}
         currentUserHasListings={currentUserHasListings}
         currentUserHasOrders={currentUserHasOrders}
@@ -44,6 +65,11 @@ export const ContactDetailsPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
+      <UserNav selectedPageName="ContactDetailsPage" />
+      <LayoutSideNavigation>
+        <TabNav rootClassName={css.tabs} tabRootClassName={css.tab} tabs={tabs} />
+        <div>Main content</div>
+      </LayoutSideNavigation>
     </PageLayout>
   );
 };
@@ -99,7 +125,7 @@ const mapStateToProps = state => {
     currentUser,
     currentUserHasListings,
     currentUserHasOrders,
-    currentUserNotificationCount: notificationCount,
+    notificationCount,
     isAuthenticated,
     logoutError,
     scrollingDisabled: isScrollingDisabled(state),

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

@@ -5,6 +5,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
   title="Contact details">
   <Topbar
     authInProgress={false}
+    currentPage="ContactDetailsPage"
     currentUser={null}
     currentUserHasListings={false}
     currentUserHasOrders={null}
@@ -25,5 +26,43 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
     onResendVerificationEmail={[Function]}
     sendVerificationEmailError={null}
     sendVerificationEmailInProgress={false} />
+  <UserNav
+    className={null}
+    rootClassName={null}
+    selectedPageName="ContactDetailsPage" />
+  <LayoutSideNavigation
+    className={null}
+    rootClassName="">
+    <TabNav
+      className={null}
+      rootClassName={null}
+      tabClassName={null}
+      tabRootClassName={null}
+      tabs={
+        Array [
+          Object {
+            "linkProps": Object {
+              "name": "ContactDetailsPage",
+            },
+            "selected": true,
+            "text": <FormattedMessage
+              id="ContactDetailsPage.emailTabTitle"
+              values={Object {}} />,
+          },
+          Object {
+            "linkProps": Object {
+              "name": "PasswordChangePage",
+            },
+            "selected": false,
+            "text": <FormattedMessage
+              id="ContactDetailsPage.passwordTabTitle"
+              values={Object {}} />,
+          },
+        ]
+      } />
+    <div>
+      Main content
+    </div>
+  </LayoutSideNavigation>
 </withRouter(PageLayout)>
 `;

src/translations/en.json

@@ -48,6 +48,8 @@
   "CheckoutPage.priceBreakdownTitle": "Booking breakdown",
   "CheckoutPage.speculateTransactionError": "Failed to fetch breakdown information.",
   "CheckoutPage.title": "Book {listingTitle}",
+  "ContactDetailsPage.emailTabTitle": "Email",
+  "ContactDetailsPage.passwordTabTitle": "Password",
   "DateInput.clearDate": "Clear Date",
   "DateInput.closeDatePicker": "Close",
   "DateInput.defaultPlaceholder": "Date input",