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 />

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -1,3 +1,7 @@
+.myPagesMenu {
+  position: relative;
+}
+
 .button {
   font-weight: 600;
 }
@@ -10,7 +14,7 @@
   transform: rotate(180deg);
 }
 
-.myPagesMenu {
+.dropdown {
   position: absolute;
   top: 46px;
   right: 0;
@@ -18,11 +22,25 @@
   padding: var(--Spacing-x2) var(--Spacing-x4);
   border-radius: var(--Corner-radius-Large);
   box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  min-width: 20rem;
   z-index: 1;
   display: none;
 }
 
-.myPagesMenu.isExpanded {
+/* Triangle above dropdown */
+.dropdown::before {
+  content: "";
+  position: absolute;
+  top: -1.25rem;
+  right: 2.4rem;
+  transform: rotate(180deg);
+  border-width: 0.75rem;
+  border-style: solid;
+  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
+    transparent;
+}
+
+.dropdown.isExpanded {
   display: block;
 }