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

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 ? (