124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import FocusLock from "react-focus-lock"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Link from "@scandic-hotels/design-system/Link"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import Card from "@/components/TempDesignSystem/Card"
|
|
|
|
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={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
|
|
{isMobile ? (
|
|
<div className={styles.backWrapper}>
|
|
<Typography variant="Title/Subtitle/lg" className={styles.text}>
|
|
<button
|
|
type="button"
|
|
className={styles.backButton}
|
|
onClick={() => toggleMegaMenu(false)}
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_back_ios"
|
|
size={20}
|
|
color="CurrentColor"
|
|
/>
|
|
<span>{title}</span>
|
|
</button>
|
|
</Typography>
|
|
</div>
|
|
) : null}
|
|
<div className={styles.megaMenuContent}>
|
|
<div className={styles.seeAllLink}>
|
|
{seeAllLink?.url ? (
|
|
<Link
|
|
href={seeAllLink.url}
|
|
variant="icon"
|
|
weight="bold"
|
|
onClick={handleNavigate}
|
|
>
|
|
{seeAllLink.title}
|
|
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<ul className={styles.submenus}>
|
|
{submenu.map((item) => (
|
|
<li 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} className={styles.submenuItem}>
|
|
<Link
|
|
href={url}
|
|
variant="menu"
|
|
className={styles.link}
|
|
onClick={handleNavigate}
|
|
>
|
|
{title}
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="Icon/Interactive/Default"
|
|
className={styles.arrow}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
) : null
|
|
)}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{card ? (
|
|
<div className={styles.cardWrapper}>
|
|
<Card
|
|
className={styles.card}
|
|
backgroundImage={card.backgroundImage}
|
|
bodyText={card.body_text}
|
|
heading={card.heading}
|
|
primaryButton={card.primaryButton}
|
|
secondaryButton={card.secondaryButton}
|
|
scriptedTopTitle={card.scripted_top_title}
|
|
onPrimaryButtonClick={handleNavigate}
|
|
onSecondaryButtonClick={handleNavigate}
|
|
imageGradient
|
|
theme="image"
|
|
height="dynamic"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</nav>
|
|
</FocusLock>
|
|
)
|
|
}
|