Merged in feat/sw-187-footer-content-stack (pull request #565)

Feat/sw 187 footer content stack

Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

components/Header/MainMenu/MobileMenu/index.tsx

@@ -14,6 +14,7 @@ import NavigationMenu from "../NavigationMenu"
 
 import styles from "./mobileMenu.module.css"
 
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
 export default function MobileMenu({
@@ -23,37 +24,25 @@ export default function MobileMenu({
 }: MobileMenuProps) {
   const intl = useIntl()
   const {
+    handleHamburgerClick,
+    toggleDropdown,
     isHamburgerMenuOpen,
     isMyPagesMobileMenuOpen,
-    isLanguageSwitcherOpen,
-    toggleHamburgerMenu,
-    toggleMyPagesMobileMenu,
-    toggleLanguageSwitcher,
+    isHeaderLanguageSwitcherMobileOpen,
+    isFooterLanguageSwitcherOpen,
   } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
-      toggleHamburgerMenu()
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
     }
   })
 
-  function handleHamburgerClick() {
-    if (isMyPagesMobileMenuOpen) {
-      toggleMyPagesMobileMenu()
-    } else {
-      if (isLanguageSwitcherOpen) {
-        toggleLanguageSwitcher()
-      }
-
-      toggleHamburgerMenu()
-    }
-  }
-
   return (
     <>
       <button
         type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
         aria-label={intl.formatMessage({
           id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
         })}
@@ -61,7 +50,10 @@ export default function MobileMenu({
       >
         <span className={styles.bar}></span>
       </button>
-      <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
+      <Modal
+        className={styles.modal}
+        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
+      >
         <Dialog
           className={styles.dialog}
           aria-label={intl.formatMessage({ id: "Menu" })}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -7,7 +7,6 @@ import useDropdownStore from "@/stores/main-menu"
 import { ChevronDownIcon } from "@/components/Icons"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import useLang from "@/hooks/useLang"
 import { getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"
@@ -16,6 +15,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenu({
@@ -24,18 +24,21 @@ export default function MyPagesMenu({
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
-  const lang = useLang()
-  const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
+
+  const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMyPagesMenuOpen) {
-      toggleMyPagesMenu()
+      toggleDropdown(DropdownTypeEnum.MyPagesMenu)
     }
   })
 
   return (
     <div className={styles.myPagesMenu}>
-      <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
+      <MainMenuButton
+        className={styles.button}
+        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
+      >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
         <Subtitle type="two" className={styles.userName}>
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
@@ -51,7 +54,9 @@ export default function MyPagesMenu({
             navigation={navigation}
             user={user}
             membership={membership}
-            toggleOpenStateFn={toggleMyPagesMenu}
+            toggleOpenStateFn={() =>
+              toggleDropdown(DropdownTypeEnum.MyPagesMenu)
+            }
           />
         </div>
       ) : null}

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

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