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

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) {