Header nav links fixes (#1988)

mitodl · Nov 14, 2023 · c4903ae · c4903ae
1 parent c7f27ce
commit c4903ae
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/frontend/public/src/components/AnonymousMenu.js b/frontend/public/src/components/AnonymousMenu.js
@@ -13,6 +13,15 @@ type Props = {
 const AnonymousMenu = ({ mobileView }: Props) => {
   const identifierPostfix = mobileView ? "Mobile" : "Desktop"
   const newDesign = checkFeatureFlag("mitxonline-new-header", "anonymousUser")
+  const makeNavLink = (text: string) => {
+    return mobileView ? (
+      <span data-bs-target="#nav" data-bs-toggle="collapse">
+        {text}
+      </span>
+    ) : (
+      text
+    )
+  }
   return (
     <ul>
       {newDesign ? (
@@ -23,9 +32,7 @@ const AnonymousMenu = ({ mobileView }: Props) => {
             className="top-nav-link"
             aria-label="Catalog"
           >
-            <span data-bs-target="#nav" data-bs-toggle="collapse">
-              Catalog
-            </span>
+            {makeNavLink("Catalog")}
           </MixedLink>
         </li>
       ) : null}
@@ -36,9 +43,7 @@ const AnonymousMenu = ({ mobileView }: Props) => {
           className="simple"
           aria-label="Sign In"
         >
-          <span data-bs-target="#nav" data-bs-toggle="collapse">
-            Sign In
-          </span>
+          {makeNavLink("Sign In")}
         </MixedLink>
       </li>
       <li>
@@ -48,9 +53,7 @@ const AnonymousMenu = ({ mobileView }: Props) => {
           className="simple button"
           aria-label="Create Account"
         >
-          <span data-bs-target="#nav" data-bs-toggle="collapse">
-            Create Account
-          </span>
+          {makeNavLink("Create Account")}
         </MixedLink>
       </li>
     </ul>

diff --git a/frontend/public/src/components/UserMenu.js b/frontend/public/src/components/UserMenu.js
@@ -46,6 +46,15 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => {
     "mitxonline-new-header",
     currentUser && currentUser.id ? currentUser.id : "anonymousUser"
   )
+  const makeNavLink = (text: string) => {
+    return useScreenOverlay ? (
+      <span data-bs-target="#nav" data-bs-toggle="collapse">
+        {text}
+      </span>
+    ) : (
+      text
+    )
+  }
   menuChildProps = useScreenOverlay
     ? {
       li:                 overlayListItemProps,
@@ -78,39 +87,29 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => {
       >
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.profile} aria-label="Profile">
-            <span data-bs-target="#nav" data-bs-toggle="collapse">
-              Profile
-            </span>
+            {makeNavLink("Profile")}
           </MixedLink>
         </li>
         {showNewDesign && useScreenOverlay ? (
           <li {...(menuChildProps.li || {})}>
             <MixedLink dest={routes.catalog} aria-label="Catalog">
-              <span data-bs-target="#nav" data-bs-toggle="collapse">
-                Catalog
-              </span>
+              {makeNavLink("Catalog")}
             </MixedLink>
           </li>
         ) : null}
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.dashboard} aria-label="Dashboard">
-            <span data-bs-target="#nav" data-bs-toggle="collapse">
-              Dashboard
-            </span>
+            {makeNavLink("Dashboard")}
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.accountSettings} aria-label="Account">
-            <span data-bs-target="#nav" data-bs-toggle="collapse">
-              Account
-            </span>
+            {makeNavLink("Account")}
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.orderHistory} aria-label="Order History">
-            <span data-bs-target="#nav" data-bs-toggle="collapse">
-              Order History
-            </span>
+            {makeNavLink("Order History")}
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>