feat(SW-187): simplify dropdown menu

components/Current/Header/MainMenu/index.tsx

@@ -18,6 +18,7 @@ import LoginButton from "../LoginButton"
 import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
+import { DropdownType } from "@/types/components/dropdown/dropdown"
 
 export function MainMenu({
   frontpageLinkText,
@@ -61,12 +62,11 @@ export function MainMenu({
     "/sv/current-content-page",
   ].includes(pathname)
 
-  const {
-    isHamburgerMenuOpen,
-    isMyPagesMobileMenuOpen,
-    toggleHamburgerMenu,
-    toggleMyPagesMobileMenu,
-  } = useDropdownStore()
+  const { toggleDropdown, openDropdown } = useDropdownStore()
+
+  const isMyPagesMobileMenuOpen =
+    openDropdown === DropdownType.MyPagesMobileMenu
+  const isHamburgerMenuOpen = openDropdown === DropdownType.HamburgerMenu
 
   function handleMyPagesMobileMenuClick() {
     // Only track click when opening it
@@ -74,7 +74,7 @@ export function MainMenu({
       trackClick("profile picture icon")
     }
 
-    toggleMyPagesMobileMenu()
+    toggleDropdown(DropdownType.MyPagesMobileMenu)
   }
 
   return (
@@ -89,7 +89,7 @@ export function MainMenu({
           <button
             aria-pressed="false"
             className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
-            onClick={toggleHamburgerMenu}
+            onClick={() => toggleDropdown(DropdownType.HamburgerMenu)}
             type="button"
           >
             <span className={styles.iconBars}></span>

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -13,6 +13,8 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
+import { DropdownType } from "@/types/components/dropdown/dropdown"
+
 type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
 
 export default function MyPagesMobileDropdown({
@@ -22,8 +24,10 @@ export default function MyPagesMobileDropdown({
 }) {
   const { formatMessage } = useIntl()
   const lang = useLang()
-  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
-    useDropdownStore()
+  const { toggleDropdown, openDropdown } = useDropdownStore()
+
+  const isMyPagesMobileMenuOpen =
+    openDropdown === DropdownType.MyPagesMobileMenu
 
   if (!navigation) {
     return null
@@ -51,7 +55,9 @@ export default function MyPagesMobileDropdown({
                     size={menuItem.display_sign_out_link ? "small" : "regular"}
                     variant="myPageMobileDropdown"
                     color="burgundy"
-                    onClick={toggleMyPagesMobileMenu}
+                    onClick={() =>
+                      toggleDropdown(DropdownType.MyPagesMobileMenu)
+                    }
                   >
                     {link.linkText}
                   </Link>