66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { Dialog, Modal } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
|
|
import LanguageSwitcher from "@/components/LanguageSwitcher"
|
|
|
|
import HeaderLink from "../../HeaderLink"
|
|
import NavigationMenu from "../NavigationMenu"
|
|
|
|
import styles from "./mobileMenu.module.css"
|
|
|
|
import { MobileMenuProps } from "@/types/components/header/mobileMenu"
|
|
|
|
export default function MobileMenu({
|
|
mainNavigation,
|
|
languageUrls,
|
|
}: MobileMenuProps) {
|
|
const intl = useIntl()
|
|
const { isHamburgerMenuOpen, toggleHamburgerMenu } = useDropdownStore()
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className={`${styles.hamburger} ${isHamburgerMenuOpen ? styles.isExpanded : ""}`}
|
|
aria-pressed="false"
|
|
aria-label={intl.formatMessage({ id: "Menu" })}
|
|
onClick={toggleHamburgerMenu}
|
|
>
|
|
<span className={styles.bar}></span>
|
|
</button>
|
|
<Modal
|
|
className={styles.modal}
|
|
isOpen={isHamburgerMenuOpen}
|
|
onOpenChange={toggleHamburgerMenu}
|
|
>
|
|
<Dialog
|
|
className={styles.dialog}
|
|
aria-label={intl.formatMessage({ id: "Menu" })}
|
|
>
|
|
<NavigationMenu variant="mobile" items={mainNavigation} />
|
|
<footer className={styles.footer}>
|
|
<HeaderLink href="#">
|
|
<SearchIcon width={20} height={20} color="burgundy" />
|
|
{intl.formatMessage({ id: "Find booking" })}
|
|
</HeaderLink>
|
|
<HeaderLink href="#">
|
|
<GiftIcon width={20} height={20} color="burgundy" />
|
|
{intl.formatMessage({ id: "Join Scandic Friends" })}
|
|
</HeaderLink>
|
|
<HeaderLink href="#">
|
|
<ServiceIcon width={20} height={20} color="burgundy" />
|
|
{intl.formatMessage({ id: "Customer service" })}
|
|
</HeaderLink>
|
|
<LanguageSwitcher urls={languageUrls} />
|
|
</footer>
|
|
</Dialog>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|