scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Erik Tiekstra
2024-08-23 13:25:41 +02:00
parent 7ef7b4a544
commit bdec054ecd
22 changed files with 459 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
components/Header/MainMenu/MyPagesMenu/Avatar/avatar.module.css → components/Header/MainMenu/Avatar/avatar.module.css
View File

0
components/Header/MainMenu/MyPagesMenu/Avatar/index.tsx → components/Header/MainMenu/Avatar/index.tsx
View File

20
components/Header/MainMenu/MobileMenu/mobileMenu.module.css
View File

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

99
components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -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 Link from "@/components/TempDesignSystem/Link"
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"
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) {
return null
}
useHandleKeyUp((event: KeyboardEvent) => {
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. */}
<div className={styles.friendTypeWrapper}>
<span className={styles.friendType}>Loyal friend</span>
<span className={styles.friendPoints}>12 350 points</span>
</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>
<MyPagesMenuContent
navigation={navigation}
user={user}
toggleOpenStateFn={toggleMyPagesMenu}
/>
</div>
</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>
)
}

128
components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
View File

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

81
components/Header/MainMenu/MyPagesMenuContent/index.tsx Normal file
View File

@@ -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>
)
}

74
components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css Normal file
View File

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

55
components/Header/MainMenu/MyPagesMobileMenu/index.tsx Normal file
View File

@@ -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>
)
}

38
components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css Normal file
View File

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

30
components/Header/MainMenu/index.tsx
View File

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

6
components/Header/MainMenu/mainMenu.module.css
View File

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

25
components/LanguageSwitcher/index.tsx
View File

@@ -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}>
<button
type="button"
className={styles.backButton}
onClick={toggleLanguageSwitcher}
>
<ChevronLeftIcon color="red" />
<Subtitle type="one">Main Menu</Subtitle>
</button>
</div>
{location === "header" ? (
<div className={styles.backWrapper}>
<button
type="button"
className={styles.backButton}
onClick={toggleLanguageSwitcher}
>
<ChevronLeftIcon color="red" />
<Subtitle type="one">Main Menu</Subtitle>
</button>
</div>
) : null}
<div className={styles.languageWrapper}>
<Subtitle className={styles.subtitle} type="two">

3
components/LanguageSwitcher/languageSwitcher.module.css
View File

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

1
hooks/useTrapFocus.ts
View File

@@ -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])) {

4
i18n/dictionaries/da.json
View File

@@ -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",

4
i18n/dictionaries/de.json
View File

@@ -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",

4
i18n/dictionaries/en.json
View File

@@ -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",

4
i18n/dictionaries/fi.json
View File

@@ -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",

4
i18n/dictionaries/no.json
View File

@@ -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",

4
i18n/dictionaries/sv.json
View File

@@ -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",

95
stores/main-menu.ts
View File

@@ -19,44 +19,85 @@ const useDropdownStore = create<DropdownState>((set) => ({
isMyPagesMenuOpen: false,
isLanguageSwitcherOpen: false,
toggleHamburgerMenu: () =>
set(({ isHamburgerMenuOpen, isMyPagesMenuOpen }) => {
// Close the other dropdown if it's open
if (!isHamburgerMenuOpen && isMyPagesMenuOpen) {
set({ isMyPagesMenuOpen: false })
set(
({ isHamburgerMenuOpen, isMyPagesMenuOpen, isMyPagesMobileMenuOpen }) => {
// Close the other dropdowns if they're open
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) => {
// Close the other dropdown if it's open
if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) {
set({ isHamburgerMenuOpen: false })
set(
({
isMyPagesMenuOpen,
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
if (!isMyPagesMenuOpen && isLanguageSwitcherOpen) {
set({ isLanguageSwitcherOpen: false })
}
if (!isMyPagesMenuOpen && isHamburgerMenuOpen) {
set({ isHamburgerMenuOpen: false })
({
isHamburgerMenuOpen,
isLanguageSwitcherOpen,
isMyPagesMenuOpen,
isMyPagesMobileMenuOpen,
}) => {
// 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 }) => {
// Close the other dropdown if it's open
if (!isLanguageSwitcherOpen && isMyPagesMenuOpen) {
set({ isMyPagesMenuOpen: false })
set(
({
isLanguageSwitcherOpen,
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

6
types/components/header/myPagesMenu.ts
View File

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