feat(SW-184): my pages menu mobile/desktop functionality

components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -64,20 +64,6 @@
   transform: rotate(45deg);
 }
 
-@media screen and (min-width: 768px) {
-  .hamburger {
-    display: none;
-  }
-}
-
-.overlay {
-  position: absolute;
-  top: var(--main-menu-mobile-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
 .modal {
   position: fixed;
   top: var(--main-menu-mobile-height);
@@ -108,3 +94,9 @@
   display: grid;
   gap: var(--Spacing-x2);
 }
+
+@media screen and (min-width: 768px) {
+  .hamburger {
+    display: none;
+  }
+}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -2,113 +2,54 @@
 
 import { useIntl } from "react-intl"
 
-import { logout } from "@/constants/routes/handleAuth"
-import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon, ChevronDownIcon } from "@/components/Icons"
+import { ChevronDownIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+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"
 import MainMenuButton from "../MainMenuButton"
-import Avatar from "./Avatar"
+import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
 import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
-// This component is mostly the same as MyPagesMobileDropdown, but with a
-// different name and some different styles. Should probably be refactored in
-// a later stage to fit the design from Figma better.
-
 export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
   const intl = useIntl()
   const lang = useLang()
   const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
 
-  if (!navigation) {
+  useHandleKeyUp((event: KeyboardEvent) => {
-    return null
+    if (event.key === "Escape" && isMyPagesMenuOpen) {
-  }
+      toggleMyPagesMenu()
+    }
+  })
 
-  return user ? (
+  return (
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <span className={styles.userName}>
+        <Subtitle type="two" className={styles.userName}>
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
-        </span>
+        </Subtitle>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
       </MainMenuButton>
-      <nav
+      <div
         className={`${styles.dropdown} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
       >
-        {/* TODO: Get information from API/ContentStack, check with design team if this information is needed here. */}
+        <MyPagesMenuContent
-        <div className={styles.friendTypeWrapper}>
+          navigation={navigation}
-          <span className={styles.friendType}>Loyal friend</span>
+          user={user}
-          <span className={styles.friendPoints}>12 350 points</span>
+          toggleOpenStateFn={toggleMyPagesMenu}
-        </div>
+        />
-
+      </div>
-        <ul className={styles.groups}>
-          {navigation.menuItems.map((menuItem, idx) => (
-            <li
-              key={`${menuItem.display_sign_out_link}-${idx}`}
-              className={styles.group}
-            >
-              <ul className={styles.menuItems}>
-                {menuItem.links.map((link) => (
-                  <li key={link.uid}>
-                    <Link
-                      href={link.originalUrl || link.url}
-                      partialMatch
-                      size={
-                        menuItem.display_sign_out_link ? "small" : "regular"
-                      }
-                      variant="myPageMobileDropdown"
-                      color="burgundy"
-                      onClick={toggleMyPagesMenu}
-                      className={styles.link}
-                    >
-                      {link.linkText}
-                      <ArrowRightIcon
-                        className={styles.arrow}
-                        color="burgundy"
-                      />
-                    </Link>
-                  </li>
-                ))}
-                {menuItem.display_sign_out_link && lang ? (
-                  <li>
-                    <Link
-                      href={logout[lang]}
-                      prefetch={false}
-                      size="small"
-                      color="burgundy"
-                      variant="myPageMobileDropdown"
-                    >
-                      {intl.formatMessage({ id: "Log out" })}
-                    </Link>
-                  </li>
-                ) : null}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </nav>
     </div>
-  ) : (
-    <Link
-      href={myPages[lang]}
-      className={styles.loginLink}
-      aria-label={intl.formatMessage({ id: "Log in/Join" })}
-    >
-      <Avatar />
-      <span className={styles.userName}>
-        {intl.formatMessage({ id: "Log in/Join" })}
-      </span>
-    </Link>
   )
 }

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

@@ -1,97 +1,47 @@
 .myPagesMenu {
-  position: relative;
-}
-
-.chevron {
   display: none;
-  transition: transform 0.2s;
-}
-
-.chevron.isExpanded {
-  transform: rotate(180deg);
-}
-
-.userName {
-  display: none;
-  font-weight: 600;
-  color: var(--Base-Text-High-contrast);
-}
-
-.dropdown {
-  position: absolute;
-  top: 46px;
-  right: 0;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  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;
-}
-
-/* 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;
-}
-
-.friendTypeWrapper {
-  padding: 0 var(--Spacing-x1) var(--Spacing-x2);
-  font-weight: 400;
-  color: var(--UI-Text-Medium-contrast);
-}
-.friendType {
-  font-family: var(--typography-Title-5-fontFamily);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  text-transform: uppercase;
-}
-
-.friendType::after {
-  content: " · ";
-  display: inline;
-  padding: 0 var(--Spacing-x-half);
-}
-
-.groups,
-.menuItems {
-  list-style: none;
-}
-
-.group {
-  padding: var(--Spacing-x2) 0;
-  border-top: 1px solid var(--Base-Border-Subtle);
-}
-
-.group:last-child {
-  padding-bottom: 0;
-}
-
-.arrow {
-  opacity: 0;
-}
-
-.loginLink {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
 }
 
 @media screen and (min-width: 768px) {
-  .userName,
+  .myPagesMenu {
+    display: block;
+    position: relative;
+  }
+
   .chevron {
-    display: initial;
+    transition: transform 0.2s;
+  }
+
+  .chevron.isExpanded {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 46px;
+    right: 0;
+    background-color: var(--Base-Surface-Primary-light-Normal);
+    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;
+  }
+
+  /* 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/MyPagesMenuContent/index.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { logout } from "@/constants/routes/handleAuth"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+import { useTrapFocus } from "@/hooks/useTrapFocus"
+
+import styles from "./myPagesMenuContent.module.css"
+
+import { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
+
+export default function MyPagesMenuContent({
+  navigation,
+  toggleOpenStateFn,
+  user,
+}: MyPagesMenuContentProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const myPagesMenuContentRef = useTrapFocus()
+
+  if (!navigation) {
+    return null
+  }
+
+  return (
+    <nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
+      <div className={styles.intro}>
+        <Subtitle type="two" className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </Subtitle>
+        <Caption className={styles.friendTypeWrapper}>
+          <span className={styles.friendType}>Loyal friend</span>
+          <span className={styles.friendPoints}>12 350 points</span>
+        </Caption>
+      </div>
+
+      <ul className={styles.groups}>
+        {navigation.menuItems.map((menuItem, idx) => (
+          <li
+            key={`${menuItem.display_sign_out_link}-${idx}`}
+            className={styles.group}
+          >
+            <Divider color="subtle" className={styles.divider} />
+            <ul className={styles.menuItems}>
+              {menuItem.links.map((link) => (
+                <li key={link.uid}>
+                  <Link
+                    href={link.originalUrl || link.url}
+                    onClick={toggleOpenStateFn}
+                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
+                  >
+                    {link.linkText}
+                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
+                  </Link>
+                </li>
+              ))}
+              {menuItem.display_sign_out_link && lang ? (
+                <li>
+                  <Link
+                    href={logout[lang]}
+                    prefetch={false}
+                    className={`${styles.link} ${styles.smallLink}`}
+                  >
+                    {intl.formatMessage({ id: "Log out" })}
+                  </Link>
+                </li>
+              ) : null}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -0,0 +1,74 @@
+.myPagesMenuContent {
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.intro {
+  padding: 0 var(--Spacing-x1);
+}
+
+.myPagesMenuContent .friendTypeWrapper {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.divider {
+  margin: var(--Spacing-x2) 0;
+}
+
+.friendType {
+  font-family: var(--typography-Title-5-fontFamily);
+  letter-spacing: var(--typography-Title-5-letterSpacing);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  text-transform: uppercase;
+}
+
+.friendType::after {
+  content: " · ";
+  display: inline;
+  padding: 0 var(--Spacing-x-half);
+}
+
+.groups,
+.menuItems {
+  list-style: none;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.link:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+.link.smallLink {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+}
+
+.link:not(:hover) .arrow {
+  opacity: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .myPagesMenuContent {
+    padding: var(--Spacing-x2) var(--Spacing-x4);
+  }
+  .userName {
+    display: none;
+  }
+}

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Dialog, Modal } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import { getInitials } from "@/utils/user"
+
+import Avatar from "../Avatar"
+import MainMenuButton from "../MainMenuButton"
+import MyPagesMenuContent from "../MyPagesMenuContent"
+
+import styles from "./myPagesMobileMenu.module.css"
+
+import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
+
+export default function MyPagesMobileMenu({
+  navigation,
+  user,
+}: MyPagesMenuProps) {
+  const intl = useIntl()
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
+
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
+      toggleMyPagesMobileMenu()
+    }
+  })
+
+  return (
+    <div className={styles.myPagesMobileMenu}>
+      <MainMenuButton
+        className={styles.button}
+        onClick={toggleMyPagesMobileMenu}
+      >
+        <Avatar initials={getInitials(user.firstName, user.lastName)} />
+      </MainMenuButton>
+      <Modal className={styles.modal} isOpen={isMyPagesMobileMenuOpen}>
+        <Dialog
+          className={styles.dialog}
+          aria-label={intl.formatMessage({ id: "My pages menu" })}
+        >
+          <MyPagesMenuContent
+            navigation={navigation}
+            user={user}
+            toggleOpenStateFn={toggleMyPagesMobileMenu}
+          />
+        </Dialog>
+      </Modal>
+    </div>
+  )
+}

components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css

@@ -0,0 +1,38 @@
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.modal {
+  position: fixed;
+  top: var(--main-menu-mobile-height);
+  right: auto;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  transition: right 0.3s;
+}
+
+.modal[data-entering] {
+  animation: slide-in 0.3s;
+}
+.modal[data-exiting] {
+  animation: slide-in 0.3s reverse;
+}
+
+.dialog {
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media screen and (min-width: 767px) {
+  .myPagesMobileMenu,
+  .modal {
+    display: none;
+  }
+}

components/Header/MainMenu/index.tsx

@@ -1,13 +1,18 @@
-import Link from "next/link"
+import NextLink from "next/link"
 
+import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
 import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import { navigationMenuItems } from "../tempHeaderData"
+import Avatar from "./Avatar"
 import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
+import MyPagesMobileMenu from "./MyPagesMobileMenu"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
@@ -16,6 +21,7 @@ import { MainMenuProps } from "@/types/components/header/mainMenu"
 
 export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
+  const lang = getLang()
   const myPagesNavigation =
     await serverClient().contentstack.myPages.navigation.get()
 
@@ -24,7 +30,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
   return (
     <div className={styles.mainMenu}>
       <nav className={styles.nav}>
-        <Link className={styles.logoLink} href="/">
+        <NextLink className={styles.logoLink} href="/">
           <Image
             alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
             className={styles.logo}
@@ -35,10 +41,26 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
             src="/_static/img/scandic-logotype.svg"
             width={103}
           />
-        </Link>
+        </NextLink>
         <div className={styles.menus}>
           <NavigationMenu items={navigationMenuItems} />
-          <MyPagesMenu navigation={myPagesNavigation} user={user} />
+          {user ? (
+            <>
+              <MyPagesMenu navigation={myPagesNavigation} user={user} />
+              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
+            </>
+          ) : (
+            <Link
+              href={myPages[lang]}
+              className={styles.loginLink}
+              aria-label={intl.formatMessage({ id: "Log in/Join" })}
+            >
+              <Avatar />
+              <span className={styles.userName}>
+                {intl.formatMessage({ id: "Log in/Join" })}
+              </span>
+            </Link>
+          )}
           <MobileMenu
             languageUrls={languageUrls}
             mainNavigation={navigationMenuItems}

components/Header/MainMenu/mainMenu.module.css

@@ -29,6 +29,12 @@
   width: 6.4375rem;
 }
 
+.loginLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
 @media screen and (min-width: 768px) {
   .nav {
     display: flex;

components/LanguageSwitcher/index.tsx

@@ -40,7 +40,7 @@ export default function LanguageSwitcher({
   })
 
   return (
-    <div className={styles.languageSwitcher} ref={languageSwitcherRef}>
+    <div className={styles.languageSwitcher}>
       <button
         type="button"
         className={styles.button}
@@ -63,17 +63,20 @@ export default function LanguageSwitcher({
 
       <div
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
+        ref={languageSwitcherRef}
       >
-        <div className={styles.backWrapper}>
+        {location === "header" ? (
-          <button
+          <div className={styles.backWrapper}>
-            type="button"
+            <button
-            className={styles.backButton}
+              type="button"
-            onClick={toggleLanguageSwitcher}
+              className={styles.backButton}
-          >
+              onClick={toggleLanguageSwitcher}
-            <ChevronLeftIcon color="red" />
+            >
-            <Subtitle type="one">Main Menu</Subtitle>
+              <ChevronLeftIcon color="red" />
-          </button>
+              <Subtitle type="one">Main Menu</Subtitle>
-        </div>
+            </button>
+          </div>
+        ) : null}
 
         <div className={styles.languageWrapper}>
           <Subtitle className={styles.subtitle} type="two">

components/LanguageSwitcher/languageSwitcher.module.css

@@ -110,7 +110,8 @@
     position: relative;
   }
 
-  .backWrapper {
+  .backWrapper,
+  .backButton {
     display: none;
   }
 

hooks/useTrapFocus.ts

@@ -44,6 +44,7 @@ export function useTrapFocus(opts?: OptionsType) {
       const { code, shiftKey } = event
       const first = tabbableElements[0]
       const last = tabbableElements[tabbableElements.length - 1]
+
       const currentActiveElement = document.activeElement
       // Scope current tabs to current root element
       if (isWithinCurrentElementScope([...tabbableElements, ref.current])) {

i18n/dictionaries/da.json

@@ -94,6 +94,8 @@
   "Member price from": "Medlemspris fra",
   "Members": "Medlemmer",
   "Membership cards": "Medlemskort",
+  "Close language menu": "Luk sprogmenu",
+  "Open language menu": "Åbn sprogmenuen",
   "Membership ID": "Medlems-id",
   "Menu": "Menu",
   "Modify": "Ændre",
@@ -101,6 +103,7 @@
   "My communication preferences": "Mine kommunikationspræferencer",
   "My membership cards": "Mine medlemskort",
   "My pages": "Mine sider",
+  "My pages menu": "Mine sider menu",
   "My payment cards": "Mine betalingskort",
   "My wishes": "Mine ønsker",
   "New password": "Nyt kodeord",
@@ -157,6 +160,7 @@
   "Select country of residence": "Vælg bopælsland",
   "Select date of birth": "Vælg fødselsdato",
   "Select language": "Vælg sprog",
+  "Select your language": "Vælg dit sprog",
   "Show all amenities": "Vis alle faciliteter",
   "Show less": "Vis mindre",
   "Show map": "Vis kort",

i18n/dictionaries/de.json

@@ -34,6 +34,7 @@
   "City/State": "Stadt/Zustand",
   "Click here to log in": "Klicken Sie hier, um sich einzuloggen",
   "Close": "Schließen",
+  "Close language menu": "Sprachmenü schließen",
   "Coming up": "Demnächst",
   "Compare all levels": "Vergleichen Sie alle Levels",
   "Contact us": "Kontaktieren Sie uns",
@@ -99,6 +100,7 @@
   "My communication preferences": "Meine Kommunikationseinstellungen",
   "My membership cards": "Meine Mitgliedskarten",
   "My pages": "Meine Seiten",
+  "My pages menu": "Meine Seite Menü",
   "My payment cards": "Meine Zahlungskarten",
   "My wishes": "Meine Wünsche",
   "New password": "Neues Kennwort",
@@ -117,6 +119,7 @@
   "number": "nummer",
   "On your journey": "Auf deiner Reise",
   "Open": "Offen",
+  "Open language menu": "Sprachmenü öffnen",
   "or": "oder",
   "Password": "Passwort",
   "Pay later": "Später bezahlen",
@@ -152,6 +155,7 @@
   "Select country of residence": "Wählen Sie das Land Ihres Wohnsitzes aus",
   "Select date of birth": "Geburtsdatum auswählen",
   "Select language": "Sprache auswählen",
+  "Select your language": "Wählen Sie Ihre Sprache",
   "Show all amenities": "Alle Annehmlichkeiten anzeigen",
   "Show less": "Weniger anzeigen",
   "Show map": "Karte anzeigen",

i18n/dictionaries/en.json

@@ -35,6 +35,8 @@
   "City/State": "City/State",
   "Click here to log in": "Click here to log in",
   "Close": "Close",
+  "Close language menu": "Close language menu",
+  "Open language menu": "Open language menu",
   "Coming up": "Coming up",
   "Compare all levels": "Compare all levels",
   "Contact us": "Contact us",
@@ -106,6 +108,7 @@
   "My communication preferences": "My communication preferences",
   "My membership cards": "My membership cards",
   "My pages": "My pages",
+  "My pages menu": "My pages menu",
   "My payment cards": "My payment cards",
   "My wishes": "My wishes",
   "New password": "New password",
@@ -163,6 +166,7 @@
   "Select country of residence": "Select country of residence",
   "Select date of birth": "Select date of birth",
   "Select language": "Select language",
+  "Select your language": "Select your language",
   "Show all amenities": "Show all amenities",
   "Show less": "Show less",
   "Show map": "Show map",

i18n/dictionaries/fi.json

@@ -35,6 +35,8 @@
   "City/State": "Kaupunki/Osavaltio",
   "Click here to log in": "Napsauta tästä kirjautuaksesi sisään",
   "Close": "Kiinni",
+  "Close language menu": "Sulje kielivalikko",
+  "Open language menu": "Avaa kielivalikko",
   "Coming up": "Tulossa",
   "Compare all levels": "Vertaa kaikkia tasoja",
   "Contact us": "Ota meihin yhteyttä",
@@ -100,6 +102,7 @@
   "My communication preferences": "Viestintämieltymykseni",
   "My membership cards": "Jäsenkorttini",
   "My pages": "Omat sivut",
+  "My pages menu": "Omat sivut -valikko",
   "My payment cards": "Minun maksukortit",
   "My wishes": "Toiveeni",
   "New password": "Uusi salasana",
@@ -156,6 +159,7 @@
   "Select country of residence": "Valitse asuinmaa",
   "Select date of birth": "Valitse syntymäaika",
   "Select language": "Valitse kieli",
+  "Select your language": "Valitse kieli",
   "Show all amenities": "Näytä kaikki mukavuudet",
   "Show less": "Näytä vähemmän",
   "Show map": "Näytä kartta",

i18n/dictionaries/no.json

@@ -101,6 +101,7 @@
   "My communication preferences": "Mine kommunikasjonspreferanser",
   "My membership cards": "Mine medlemskort",
   "My pages": "Mine sider",
+  "My pages menu": "Mine sider-menyen",
   "My payment cards": "Mine betalingskort",
   "My wishes": "Mine ønsker",
   "New password": "Nytt passord",
@@ -117,6 +118,8 @@
   "Not found": "Ikke funnet",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen",
   "number": "antall",
+  "Close language menu": "Lukk språkmeny",
+  "Open language menu": "Åpne språkmenyen",
   "On your journey": "På reisen din",
   "Open": "Åpen",
   "or": "eller",
@@ -157,6 +160,7 @@
   "Select country of residence": "Velg bostedsland",
   "Select date of birth": "Velg fødselsdato",
   "Select language": "Velg språk",
+  "Select your language": "Velg språk",
   "Show all amenities": "Vis alle fasiliteter",
   "Show less": "Vis mindre",
   "Show map": "Vis kart",

i18n/dictionaries/sv.json

@@ -35,6 +35,7 @@
   "City/State": "Ort",
   "Click here to log in": "Klicka här för att logga in",
   "Close": "Stäng",
+  "Close language menu": "Stäng språkmenyn",
   "Coming up": "Kommer härnäst",
   "Compare all levels": "Jämför alla nivåer",
   "Contact us": "Kontakta oss",
@@ -104,6 +105,7 @@
   "My membership cards": "Mina medlemskort",
   "My pages": "Mina sidor",
   "My payment cards": "Mina betalningskort",
+  "My pages menu": "Mina sidor meny",
   "My wishes": "Mina önskningar",
   "New password": "Nytt lösenord",
   "Next": "Nästa",
@@ -121,6 +123,7 @@
   "number": "nummer",
   "On your journey": "På din resa",
   "Open": "Öppna",
+  "Open language menu": "Öppna språkmenyn",
   "or": "eller",
   "Overview": "Översikt",
   "Password": "Lösenord",
@@ -160,6 +163,7 @@
   "Select country of residence": "Välj bosättningsland",
   "Select date of birth": "Välj födelsedatum",
   "Select language": "Välj språk",
+  "Select your language": "Välj ditt språk",
   "Show all amenities": "Visa alla bekvämligheter",
   "Show less": "Visa mindre",
   "Show map": "Visa karta",

stores/main-menu.ts

@@ -19,44 +19,85 @@ const useDropdownStore = create<DropdownState>((set) => ({
   isMyPagesMenuOpen: false,
   isLanguageSwitcherOpen: false,
   toggleHamburgerMenu: () =>
-    set(({ isHamburgerMenuOpen, isMyPagesMenuOpen }) => {
+    set(
-      // Close the other dropdown if it's open
+      ({ isHamburgerMenuOpen, isMyPagesMenuOpen, isMyPagesMobileMenuOpen }) => {
-      if (!isHamburgerMenuOpen && isMyPagesMenuOpen) {
+        // Close the other dropdowns if they're open
-        set({ isMyPagesMenuOpen: false })
+        if (!isHamburgerMenuOpen) {
+          if (isMyPagesMenuOpen) {
+            set({ isMyPagesMenuOpen: false })
+          }
+          if (isMyPagesMobileMenuOpen) {
+            set({ isMyPagesMobileMenuOpen: false })
+          }
+        }
+        return { isHamburgerMenuOpen: !isHamburgerMenuOpen }
       }
-      return { isHamburgerMenuOpen: !isHamburgerMenuOpen }
+    ),
-    }),
-  // toggleHamburgerMenu: () =>
-  //   set((state) => ({ isHamburgerMenuOpen: !state.isHamburgerMenuOpen })),
   toggleMyPagesMobileMenu: () =>
-    set((state) => {
+    set(
-      // Close the other dropdown if it's open
+      ({
-      if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) {
+        isMyPagesMenuOpen,
-        set({ isHamburgerMenuOpen: false })
+        isMyPagesMobileMenuOpen,
+        isHamburgerMenuOpen,
+        isLanguageSwitcherOpen,
+      }) => {
+        // Close the other dropdowns if they're open
+        if (!isMyPagesMobileMenuOpen) {
+          if (isMyPagesMenuOpen) {
+            set({ isMyPagesMenuOpen: false })
+          }
+          if (isHamburgerMenuOpen) {
+            set({ isHamburgerMenuOpen: false })
+          }
+          if (isLanguageSwitcherOpen) {
+            set({ isLanguageSwitcherOpen: false })
+          }
+        }
+        return { isMyPagesMobileMenuOpen: !isMyPagesMobileMenuOpen }
       }
-      return { isMyPagesMobileMenuOpen: !state.isMyPagesMobileMenuOpen }
+    ),
-    }),
   toggleMyPagesMenu: () =>
     set(
-      ({ isHamburgerMenuOpen, isLanguageSwitcherOpen, isMyPagesMenuOpen }) => {
+      ({
-        // Close the other dropdown if it's open
+        isHamburgerMenuOpen,
-        if (!isMyPagesMenuOpen && isLanguageSwitcherOpen) {
+        isLanguageSwitcherOpen,
-          set({ isLanguageSwitcherOpen: false })
+        isMyPagesMenuOpen,
-        }
+        isMyPagesMobileMenuOpen,
-        if (!isMyPagesMenuOpen && isHamburgerMenuOpen) {
+      }) => {
-          set({ isHamburgerMenuOpen: false })
+        // Close the other dropdowns if they're open
+        if (!isMyPagesMenuOpen) {
+          if (isHamburgerMenuOpen) {
+            set({ isHamburgerMenuOpen: false })
+          }
+          if (isMyPagesMobileMenuOpen) {
+            set({ isMyPagesMobileMenuOpen: false })
+          }
+          if (isLanguageSwitcherOpen) {
+            set({ isLanguageSwitcherOpen: false })
+          }
         }
         return { isMyPagesMenuOpen: !isMyPagesMenuOpen }
       }
     ),
   toggleLanguageSwitcher: () =>
-    set(({ isLanguageSwitcherOpen, isMyPagesMenuOpen }) => {
+    set(
-      // Close the other dropdown if it's open
+      ({
-      if (!isLanguageSwitcherOpen && isMyPagesMenuOpen) {
+        isLanguageSwitcherOpen,
-        set({ isMyPagesMenuOpen: false })
+        isMyPagesMenuOpen,
+        isMyPagesMobileMenuOpen,
+      }) => {
+        // Close the other dropdowns if they're open
+        if (!isLanguageSwitcherOpen) {
+          if (isMyPagesMenuOpen) {
+            set({ isMyPagesMenuOpen: false })
+          }
+          if (isMyPagesMobileMenuOpen) {
+            set({ isMyPagesMobileMenuOpen: false })
+          }
+        }
+        return { isLanguageSwitcherOpen: !isLanguageSwitcherOpen }
       }
-      return { isLanguageSwitcherOpen: !isLanguageSwitcherOpen }
+    ),
-    }),
 }))
 
 export default useDropdownStore

types/components/header/myPagesMenu.ts

@@ -8,5 +8,9 @@ type MyPagesNavigation = Awaited<
 
 export interface MyPagesMenuProps {
   navigation: MyPagesNavigation
-  user: Pick<User, "firstName" | "lastName"> | null
+  user: Pick<User, "firstName" | "lastName">
+}
+
+export interface MyPagesMenuContentProps extends MyPagesMenuProps {
+  toggleOpenStateFn: () => void
 }