113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { Suspense, useEffect } from "react"
|
|
import { Dialog, Modal } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
import { useMediaQuery } from "usehooks-ts"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import LanguageSwitcher from "@/components/LanguageSwitcher"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
|
|
import HeaderLink from "../../HeaderLink"
|
|
import TopLink from "../../TopLink"
|
|
|
|
import styles from "./mobileMenu.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
|
|
import { IconName } from "@/types/components/icon"
|
|
|
|
export default function MobileMenu({
|
|
children,
|
|
languageUrls,
|
|
topLink,
|
|
isLoggedIn,
|
|
}: React.PropsWithChildren<MobileMenuProps>) {
|
|
const intl = useIntl()
|
|
const {
|
|
toggleDropdown,
|
|
isHamburgerMenuOpen,
|
|
isMyPagesMobileMenuOpen,
|
|
isHeaderLanguageSwitcherMobileOpen,
|
|
isFooterLanguageSwitcherOpen,
|
|
} = useDropdownStore()
|
|
|
|
const isHamburgerExtended =
|
|
isHamburgerMenuOpen ||
|
|
isMyPagesMobileMenuOpen ||
|
|
isHeaderLanguageSwitcherMobileOpen ||
|
|
isFooterLanguageSwitcherOpen
|
|
|
|
const isAboveMobile = useMediaQuery("(min-width: 768px)")
|
|
useEffect(() => {
|
|
if (isAboveMobile && isHamburgerMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
|
|
}
|
|
}, [isAboveMobile, isHamburgerMenuOpen, toggleDropdown])
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isHamburgerMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
|
|
}
|
|
})
|
|
|
|
// Making sure the menu is always opened at the top of the page, just below the header.
|
|
useEffect(() => {
|
|
if (isHamburgerMenuOpen) {
|
|
window.scrollTo({ top: 0, behavior: "instant" })
|
|
}
|
|
}, [isHamburgerMenuOpen])
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
|
|
aria-label={intl.formatMessage({
|
|
id: isHamburgerExtended ? "Close menu" : "Open menu",
|
|
})}
|
|
onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
|
|
>
|
|
<span className={styles.bar} />
|
|
</button>
|
|
<Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
|
|
<Dialog
|
|
className={styles.dialog}
|
|
aria-label={intl.formatMessage({ id: "Menu" })}
|
|
>
|
|
{children}
|
|
<footer className={styles.footer}>
|
|
<HeaderLink href="#" iconName={IconName.Search}>
|
|
{intl.formatMessage({ id: "Find booking" })}
|
|
</HeaderLink>
|
|
<TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />
|
|
<HeaderLink href="#" iconName={IconName.Service}>
|
|
{intl.formatMessage({ id: "Customer service" })}
|
|
</HeaderLink>
|
|
<LanguageSwitcher type="mobileHeader" urls={languageUrls} />
|
|
</footer>
|
|
</Dialog>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function MobileMenuSkeleton() {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className={styles.hamburger}
|
|
aria-label={intl.formatMessage({
|
|
id: "Open menu",
|
|
})}
|
|
>
|
|
<span className={styles.bar} />
|
|
</button>
|
|
)
|
|
}
|