feat: Add settings link on mobile (#657)

* feat: Add settings link on mobile * feat: Remove unnecessary <Hidden /> components
seek-oss · Feb 6, 2020 · f051676 · f051676
1 parent 92408f1
commit f051676
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 32 deletions.
diff --git a/react/Header/UserAccountMenu/UserAccountMenu.js b/react/Header/UserAccountMenu/UserAccountMenu.js
@@ -2,7 +2,7 @@
 
 import styles from './UserAccountMenu.less';
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import classnames from 'classnames';
 
 import ArticleIcon from '../../ArticleIcon/ArticleIcon';
@@ -253,22 +253,38 @@ export default ({
               </span>
             );
           case AUTHENTICATED:
-            return linkRenderer({
-              'data-analytics': 'header:sign-out',
-              className: styles.item,
-              onClick: clearLocalStorage,
-              href: returnUrl
-                ? appendReturnUrl('/login/LogoutWithReturnUrl', returnUrl)
-                : '/Login/Logout',
-              children: [
-                'Sign Out',
-                <Hidden
-                  desktop
-                  key="iconSpacer"
-                  className={styles.iconSpacer}
-                />
-              ]
-            });
+            return (
+              <Fragment>
+                <li
+                  className={classnames(
+                    activeTab === SETTINGS && styles.activeTab
+                  )}
+                >
+                  {linkRenderer({
+                    'data-analytics': 'header:settings',
+                    className: styles.item,
+                    href: '/settings/',
+                    children: [
+                      SETTINGS,
+                      <div key="iconSpacer" className={styles.iconSpacer} />
+                    ]
+                  })}
+                </li>
+                {linkRenderer({
+                  'data-analytics': 'header:sign-out',
+                  className: styles.item,
+                  onClick: clearLocalStorage,
+                  href: returnUrl
+                    ? appendReturnUrl('/login/LogoutWithReturnUrl', returnUrl)
+                    : '/Login/Logout',
+                  children: [
+                    'Sign Out',
+                    <div key="iconSpacer" className={styles.iconSpacer} />
+                  ]
+                })}
+              </Fragment>
+            );
+
           default:
             return (
               <span className={classnames(styles.item, styles.pendingAuth)}>

diff --git a/react/Header/__snapshots__/Header.test.js.snap b/react/Header/__snapshots__/Header.test.js.snap
@@ -850,18 +850,31 @@ exports[`Header: should render first part of email address when username isn't p
                   </li>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
+                  />
+                  <li
+                    class=""
                   >
                     <a
                       class="UserAccountMenu__item"
-                      data-analytics="header:sign-out"
-                      href="/Login/Logout"
+                      data-analytics="header:settings"
+                      href="/settings/"
                     >
-                      Sign Out
-                      <span
-                        class="UserAccountMenu__iconSpacer Hidden__desktop"
+                      Settings
+                      <div
+                        class="UserAccountMenu__iconSpacer"
                       />
                     </a>
                   </li>
+                  <a
+                    class="UserAccountMenu__item"
+                    data-analytics="header:sign-out"
+                    href="/Login/Logout"
+                  >
+                    Sign Out
+                    <div
+                      class="UserAccountMenu__iconSpacer"
+                    />
+                  </a>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
                   >
@@ -1983,18 +1996,31 @@ exports[`Header: should render when authenticated 1`] = `
                   </li>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
+                  />
+                  <li
+                    class=""
                   >
                     <a
                       class="UserAccountMenu__item"
-                      data-analytics="header:sign-out"
-                      href="/login/LogoutWithReturnUrl?returnUrl=%2Fjobs"
+                      data-analytics="header:settings"
+                      href="/settings/"
                     >
-                      Sign Out
-                      <span
-                        class="UserAccountMenu__iconSpacer Hidden__desktop"
+                      Settings
+                      <div
+                        class="UserAccountMenu__iconSpacer"
                       />
                     </a>
                   </li>
+                  <a
+                    class="UserAccountMenu__item"
+                    data-analytics="header:sign-out"
+                    href="/login/LogoutWithReturnUrl?returnUrl=%2Fjobs"
+                  >
+                    Sign Out
+                    <div
+                      class="UserAccountMenu__iconSpacer"
+                    />
+                  </a>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
                   >
@@ -2548,18 +2574,31 @@ exports[`Header: should render when authenticated but username and email is not
                   </li>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
+                  />
+                  <li
+                    class=""
                   >
                     <a
                       class="UserAccountMenu__item"
-                      data-analytics="header:sign-out"
-                      href="/Login/Logout"
+                      data-analytics="header:settings"
+                      href="/settings/"
                     >
-                      Sign Out
-                      <span
-                        class="UserAccountMenu__iconSpacer Hidden__desktop"
+                      Settings
+                      <div
+                        class="UserAccountMenu__iconSpacer"
                       />
                     </a>
                   </li>
+                  <a
+                    class="UserAccountMenu__item"
+                    data-analytics="header:sign-out"
+                    href="/Login/Logout"
+                  >
+                    Sign Out
+                    <div
+                      class="UserAccountMenu__iconSpacer"
+                    />
+                  </a>
                   <li
                     class="UserAccountMenu__firstItemInGroup Hidden__desktop"
                   >