fix(SW-184): using store for state-handling of menus

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -25,28 +25,24 @@ import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
   const intl = useIntl()
   const lang = useLang()
-  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
-    useDropdownStore()
+  const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
 
   if (!navigation) {
     return null
   }
 
   return user ? (
-    <>
-      <MainMenuButton
-        className={styles.button}
-        onClick={toggleMyPagesMobileMenu}
-      >
+    <div className={styles.myPagesMenu}>
+      <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
         {intl.formatMessage({ id: "Hi" })} {user.firstName}!
         <ChevronDownIcon
-          className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
       </MainMenuButton>
       <nav
-        className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+        className={`${styles.dropdown} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
       >
         {/* TODO: Get information from API/ContentStack, check with design team if this information is needed here. */}
         <div className={styles.friendTypeWrapper}>
@@ -71,7 +67,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
                       }
                       variant="myPageMobileDropdown"
                       color="burgundy"
-                      onClick={toggleMyPagesMobileMenu}
+                      onClick={toggleMyPagesMenu}
                       className={styles.link}
                     >
                       {link.linkText}
@@ -100,7 +96,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
           ))}
         </ul>
       </nav>
-    </>
+    </div>
   ) : (
     <Link href={myPages[lang]} className={styles.link}>
       <Avatar />