fix(SW-272): now closing hamburger menu upon navigation from mega menu

components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -11,6 +11,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./megaMenu.module.css"
 
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MegaMenuProps } from "@/types/components/header/megaMenu"
 
 export default function MegaMenu({
@@ -20,12 +21,17 @@ export default function MegaMenu({
   submenu,
   card,
 }: MegaMenuProps) {
-  const { toggleMegaMenu } = useDropdownStore()
+  const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
+    useDropdownStore()
   const megaMenuRef = useTrapFocus()
 
-  function closeMegaMenu() {
+  function handleNavigate() {
     toggleMegaMenu(false)
+    if (isHamburgerMenuOpen) {
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+    }
   }
+
   return (
     <nav className={styles.megaMenu}>
       {isMobile ? (
@@ -33,7 +39,7 @@ export default function MegaMenu({
           <button
             type="button"
             className={styles.backButton}
-            onClick={closeMegaMenu}
+            onClick={() => toggleMegaMenu(false)}
           >
             <ChevronLeftIcon color="red" />
             <Subtitle type="one" color="burgundy">
@@ -49,7 +55,7 @@ export default function MegaMenu({
               href={seeAllLink.link.url}
               color="burgundy"
               variant="icon"
-              onClick={closeMegaMenu}
+              onClick={handleNavigate}
             >
               {seeAllLink.title}
               <ArrowRightIcon color="burgundy" />
@@ -70,7 +76,7 @@ export default function MegaMenu({
                         href={link.url}
                         variant="menu"
                         className={styles.link}
-                        onClick={closeMegaMenu}
+                        onClick={handleNavigate}
                       >
                         {title}
                         <ArrowRightIcon
@@ -95,8 +101,8 @@ export default function MegaMenu({
               primaryButton={card.primaryButton}
               secondaryButton={card.secondaryButton}
               scriptedTopTitle={card.scripted_top_title}
-              onPrimaryButtonClick={closeMegaMenu}
+              onPrimaryButtonClick={handleNavigate}
-              onSecondaryButtonClick={closeMegaMenu}
+              onSecondaryButtonClick={handleNavigate}
               theme="image"
             />
           </div>