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

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