112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { Button as ButtonRAC } from "react-aria-components"
|
|
import FocusLock from "react-focus-lock"
|
|
|
|
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { MenuLink } from "../../MenuLink"
|
|
|
|
import styles from "./megaMenu.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import type { MegaMenuProps } from "@/types/components/header/megaMenu"
|
|
|
|
export default function MegaMenu({
|
|
isMobile,
|
|
title,
|
|
seeAllLink,
|
|
submenu,
|
|
card,
|
|
isOpen,
|
|
}: MegaMenuProps) {
|
|
const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
|
|
useDropdownStore()
|
|
|
|
function handleNavigate() {
|
|
toggleMegaMenu(false)
|
|
if (isHamburgerMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<FocusLock disabled={!isOpen} returnFocus={true}>
|
|
<nav className={cx(styles.megaMenu, { [styles.active]: isOpen })}>
|
|
{isMobile ? (
|
|
<div className={styles.backWrapper}>
|
|
<Typography variant="Title/Subtitle/lg">
|
|
<ButtonRAC
|
|
className={styles.backButton}
|
|
onPress={() => toggleMegaMenu(false)}
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_back_ios"
|
|
size={20}
|
|
color="CurrentColor"
|
|
/>
|
|
<span>{title}</span>
|
|
</ButtonRAC>
|
|
</Typography>
|
|
</div>
|
|
) : null}
|
|
<div className={styles.megaMenuContent}>
|
|
<div className={styles.seeAllLinkWrapper}>
|
|
{seeAllLink?.url ? (
|
|
<ButtonLink
|
|
href={seeAllLink.url}
|
|
variant="Text"
|
|
onClick={handleNavigate}
|
|
wrapping={false}
|
|
>
|
|
{seeAllLink.title}
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="CurrentColor"
|
|
size={24}
|
|
/>
|
|
</ButtonLink>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.submenus}>
|
|
{submenu.map((item) => (
|
|
<div key={item.title} className={styles.submenusItem}>
|
|
<Typography variant="Title/Overline/sm">
|
|
<span className={styles.submenuTitle}>{item.title}</span>
|
|
</Typography>
|
|
<ul className={styles.submenu}>
|
|
{item.links.map(({ title, url }) =>
|
|
url ? (
|
|
<li key={title}>
|
|
<MenuLink href={url} onClick={handleNavigate}>
|
|
{title}
|
|
</MenuLink>
|
|
</li>
|
|
) : null
|
|
)}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{card ? (
|
|
<div className={styles.cardWrapper}>
|
|
<InfoCard
|
|
className={styles.card}
|
|
{...card}
|
|
theme={card.backgroundImage ? "Image" : "Primary 1"}
|
|
height="dynamic"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</nav>
|
|
</FocusLock>
|
|
)
|
|
}
|