fix(SW-272): now closing on click outside and also closing the mobile menu when changing to screensizes larger than mobile

components/Header/MainMenu/MobileMenu/index.tsx

@@ -9,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import useMediaQuery from "@/hooks/useMediaQuery"
 
 import HeaderLink from "../../HeaderLink"
 
@@ -37,6 +38,13 @@ export default function MobileMenu({
     isHeaderLanguageSwitcherMobileOpen ||
     isFooterLanguageSwitcherOpen
 
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+  useEffect(() => {
+    if (isAboveMobile && isHamburgerMenuOpen) {
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+    }
+  }, [isAboveMobile, isHamburgerMenuOpen, toggleDropdown])
+
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
       toggleDropdown(DropdownTypeEnum.HamburgerMenu)

components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -97,7 +97,8 @@
 }
 
 @media screen and (min-width: 768px) {
-  .hamburger {
+  .hamburger,
+  .modal {
     display: none;
   }
 }

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -1,11 +1,13 @@
 "use client"
 
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownIcon } from "@/components/Icons"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"
 
@@ -24,6 +26,7 @@ export default function MyPagesMenu({
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
+  const myPagesMenuRef = useRef<HTMLDivElement>(null)
 
   const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
 
@@ -33,8 +36,12 @@ export default function MyPagesMenu({
     }
   })
 
+  useClickOutside(myPagesMenuRef, isMyPagesMenuOpen, () => {
+    toggleDropdown(DropdownTypeEnum.MyPagesMenu)
+  })
+
   return (
-    <div className={styles.myPagesMenu}>
+    <div className={styles.myPagesMenu} ref={myPagesMenuRef}>
       <MainMenuButton
         onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import useMediaQuery from "@/hooks/useMediaQuery"
 import { getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"
@@ -32,6 +33,13 @@ export default function MyPagesMobileMenu({
     }
   })
 
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+  useEffect(() => {
+    if (isAboveMobile && isMyPagesMobileMenuOpen) {
+      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
+    }
+  }, [isAboveMobile, isMyPagesMobileMenuOpen, toggleDropdown])
+
   // Making sure the menu is always opened at the top of the page, just below the header.
   useEffect(() => {
     if (isMyPagesMobileMenuOpen) {

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

@@ -1,9 +1,12 @@
 "use client"
 
+import { useRef } from "react"
+
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
+import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import MainMenuButton from "../../MainMenuButton"
@@ -15,8 +18,10 @@ import type { NavigationMenuItemProps } from "@/types/components/header/navigati
 
 export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
   const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
+  const megaMenuRef = useRef<HTMLDivElement>(null)
   const { submenu, title, link, seeAllLink, card } = item
-  const isMegaMenuOpen = openMegaMenu === title
+  const megaMenuTitle = `${title}-${isMobile ? "mobile" : "desktop"}`
+  const isMegaMenuOpen = openMegaMenu === megaMenuTitle
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMegaMenuOpen) {
@@ -24,10 +29,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     }
   })
 
+  useClickOutside(megaMenuRef, isMegaMenuOpen && !isMobile, () => {
+    toggleMegaMenu(false)
+  })
+
   return submenu.length ? (
     <>
       <MainMenuButton
-        onClick={() => toggleMegaMenu(title)}
+        onClick={() => toggleMegaMenu(megaMenuTitle)}
         className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
       >
         {title}
@@ -41,6 +50,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
         )}
       </MainMenuButton>
       <div
+        ref={megaMenuRef}
         className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
       >
         {isMegaMenuOpen ? (