From f19b0f6f8085ead94fc7de2065703152a8b9e50e Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Tue, 28 Apr 2026 09:02:18 -0700
Subject: [PATCH] fix(component-header-footer): fix nav link doesn't close menu

---
 .../HeaderMain/NavbarContainer/NavItem/index.js  |  8 +++++++-
 .../src/header/core/utils/data-mock.js           | 16 ++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
index a6d0b3278f..6dc84ae90a 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
@@ -161,6 +161,7 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
       // so we need to manually close the menu and trigger the onClick event
       setMobileMenuOpen(false);
       setItemOpened();
+      link.onClick?.(e);
       return;
     }
     const { key } = e;
@@ -194,9 +195,14 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
           // Regardless of state or props mobile/desktop/hover/click
           // if the item has a dropdown, we want to toggle it on Enter/Space
           setItemOpened();
+        } else {
+          // Single page apps do not leave the page on link click,
+          // so we need to manually close the menu and trigger the onClick event
+          setMobileMenuOpen(false);
+          setItemOpened();
+          link.onClick?.(e);
         }
         dispatchGAEvent();
-        link.onClick?.(e);
       }
       if (key === "ArrowDown" || key === "ArrowRight") {
         if (opened) {
diff --git a/packages/component-header-footer/src/header/core/utils/data-mock.js b/packages/component-header-footer/src/header/core/utils/data-mock.js
index 1c91e3e96c..74d2b01869 100644
--- a/packages/component-header-footer/src/header/core/utils/data-mock.js
+++ b/packages/component-header-footer/src/header/core/utils/data-mock.js
@@ -22,8 +22,12 @@ const basicNavTree = [
           text: "Sublink 2",
         },
         {
-          href: "https://www.asu.edu",
-          text: "Sublink 3",
+          onClick: () => {
+            console.log(
+              "onClick Callback - Single page app, onClick should close mobile menu and trigger GA event"
+            );
+          },
+          text: "Single Page App Click 3",
         },
         {
           href: "https://www.asu.edu",
@@ -87,8 +91,12 @@ const basicNavTree = [
     href: "#",
   },
   {
-    text: "Link option 4",
-    href: "#",
+    text: "Single Page App Click 4",
+    onClick: () => {
+      console.log(
+        "onClick Callback - Single page app, onClick should close (mobile/dropdown) menu and trigger GA event"
+      );
+    },
   },
   {
     text: "Link option 5",