From c4903aec124f7f778486fdc9fcae1d33abe4ca73 Mon Sep 17 00:00:00 2001
From: Anna Gavrilman <annagav@users.noreply.github.com>
Date: Tue, 14 Nov 2023 10:38:38 -0500
Subject: [PATCH] Header nav links fixes (#1988)

---
 .../public/src/components/AnonymousMenu.js    | 21 ++++++++------
 frontend/public/src/components/UserMenu.js    | 29 +++++++++----------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/frontend/public/src/components/AnonymousMenu.js b/frontend/public/src/components/AnonymousMenu.js
index 7c52d4120b..585a675b36 100644
--- 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
index f4b6bc39dd..dd50724d9a 100644
--- 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 || {})}>