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

components/Header/MainMenu/mainMenu.module.css

@@ -5,8 +5,7 @@
 }
 
 .nav {
-  position: relative;
-  max-width: 89.5rem;
+  max-width: var(--max-width-navigation);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import Link from "next/link"
-import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
+import useDropdownStore from "@/stores/main-menu"
 
 import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
@@ -16,28 +16,24 @@ import { LanguageSwitcherProps } from "@/types/components/current/languageSwitch
 
 export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
   const currentLanguage = useLang()
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  function toggleExpand() {
-    setIsExpanded((prev) => !prev)
-  }
+  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
 
   const urlKeys = Object.keys(urls) as Lang[]
 
   return (
     <div className={styles.languageSwitcher}>
-      <TopMenuButton onClick={toggleExpand}>
+      <TopMenuButton onClick={toggleLanguageSwitcher}>
         <GlobeIcon width={20} height={20} color="burgundy" />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
-          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
           color="burgundy"
         />
       </TopMenuButton>
       <div
-        className={`${styles.dropdown} ${isExpanded ? styles.isExpanded : ""}`}
+        className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
         <ul className={styles.list}>
           {urlKeys.map((key) => {

components/Header/TopMenu/topMenu.module.css

@@ -5,8 +5,7 @@
 }
 
 .content {
-  position: relative;
-  max-width: 89.5rem;
+  max-width: var(--max-width-navigation);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;

components/Header/header.module.css

@@ -1,5 +1,4 @@
 .header {
-  position: relative;
   font-family: var(--typography-Body-Regular-fontFamily);
   color: var(--Base-Text-High-contrast);
   z-index: 10;