feat(sw-187): Refactor dropdown to keep more logic in main-menu.ts

components/Header/MainMenu/MobileMenu/index.tsx

@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
 
 import styles from "./mobileMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
 export default function MobileMenu({
@@ -23,35 +23,31 @@ export default function MobileMenu({
   topLink,
 }: MobileMenuProps) {
   const intl = useIntl()
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-  const isHamburgerMenuOpen =
-    openDropdown === DropdownType.HamburgerMenu ||
-    openDropdown === DropdownType.HeaderLanguageMobile
-
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
-  const isHeaderLanguageSwitcherOpen =
-    openDropdown === DropdownType.HeaderLanguageMobile
-  const isFooterLanguageSwitcherOpen =
-    openDropdown === DropdownType.FooterLanguage
+  const {
+    toggleDropdown,
+    isHamburgerMenuOpen,
+    isMyPagesMobileMenuOpen,
+    isHeaderLanguageSwitcherMobileOpen,
+    isFooterLanguageSwitcherOpen,
+  } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
-      toggleDropdown(DropdownType.HamburgerMenu)
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
     }
   })
 
   function handleHamburgerClick() {
     if (isMyPagesMobileMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMobileMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
     } else {
-      if (isHeaderLanguageSwitcherOpen) {
-        toggleDropdown(DropdownType.HeaderLanguageMobile)
+      if (isHeaderLanguageSwitcherMobileOpen) {
+        toggleDropdown(DropdownTypeEnum.HeaderLanguageSwitcherMobile)
       }
       if (!isFooterLanguageSwitcherOpen) {
-        toggleDropdown(DropdownType.HamburgerMenu)
+        toggleDropdown(DropdownTypeEnum.HamburgerMenu)
       } else {
-        toggleDropdown(DropdownType.FooterLanguage)
+        toggleDropdown(DropdownTypeEnum.FooterLanguageSwitcher)
       }
     }
   }
@@ -60,7 +56,7 @@ export default function MobileMenu({
     <>
       <button
         type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
         aria-label={intl.formatMessage({
           id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
         })}
@@ -70,7 +66,7 @@ export default function MobileMenu({
       </button>
       <Modal
         className={styles.modal}
-        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherOpen}
+        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
       >
         <Dialog
           className={styles.dialog}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -15,7 +15,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenu({
@@ -25,12 +25,11 @@ export default function MyPagesMenu({
 }: MyPagesMenuProps) {
   const intl = useIntl()
 
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-  const isMyPagesMenuOpen = openDropdown === DropdownType.MyPagesMenu
+  const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMyPagesMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMenu)
     }
   })
 
@@ -38,7 +37,7 @@ export default function MyPagesMenu({
     <div className={styles.myPagesMenu}>
       <MainMenuButton
         className={styles.button}
-        onClick={() => toggleDropdown(DropdownType.MyPagesMenu)}
+        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
         <Subtitle type="two" className={styles.userName}>
@@ -55,7 +54,9 @@ export default function MyPagesMenu({
             navigation={navigation}
             user={user}
             membership={membership}
-            toggleOpenStateFn={() => toggleDropdown(DropdownType.MyPagesMenu)}
+            toggleOpenStateFn={() =>
+              toggleDropdown(DropdownTypeEnum.MyPagesMenu)
+            }
           />
         </div>
       ) : null}

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMobileMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMobileMenu({
@@ -23,13 +23,11 @@ export default function MyPagesMobileMenu({
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
-  const { openDropdown, toggleDropdown } = useDropdownStore()
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
+  const { isMyPagesMobileMenuOpen, toggleDropdown } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMobileMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
     }
   })
 
@@ -37,7 +35,7 @@ export default function MyPagesMobileMenu({
     <div className={styles.myPagesMobileMenu}>
       <MainMenuButton
         className={styles.button}
-        onClick={() => toggleDropdown(DropdownType.MyPagesMobileMenu)}
+        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
         aria-label={intl.formatMessage({ id: "Open my pages menu" })}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
@@ -52,7 +50,7 @@ export default function MyPagesMobileMenu({
             navigation={navigation}
             user={user}
             toggleOpenStateFn={() =>
-              toggleDropdown(DropdownType.MyPagesMobileMenu)
+              toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
             }
           />
         </Dialog>