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;
   }
 }