125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import FocusLock from "react-focus-lock"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
|
|
import Card from "@/components/TempDesignSystem/Card"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
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}>
|
|
<button
|
|
type="button"
|
|
className={styles.backButton}
|
|
onClick={() => toggleMegaMenu(false)}
|
|
>
|
|
<ChevronLeftIcon color="red" height={20} width={20} />
|
|
<Subtitle type="one" color="burgundy" asChild>
|
|
<span>{title}</span>
|
|
</Subtitle>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
<div className={styles.megaMenuContent}>
|
|
<div className={styles.seeAllLink}>
|
|
{seeAllLink?.link ? (
|
|
<Link
|
|
href={seeAllLink.link.url}
|
|
color="burgundy"
|
|
variant="icon"
|
|
weight="bold"
|
|
onClick={handleNavigate}
|
|
>
|
|
{seeAllLink.title}
|
|
<ArrowRightIcon color="burgundy" />
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<ul className={styles.submenus}>
|
|
{submenu.map((item) => (
|
|
<li key={item.title} className={styles.submenusItem}>
|
|
<Caption
|
|
type="label"
|
|
color="uiTextPlaceholder"
|
|
textTransform="uppercase"
|
|
asChild
|
|
>
|
|
<span className={styles.submenuTitle}>{item.title}</span>
|
|
</Caption>
|
|
<ul className={styles.submenu}>
|
|
{item.links.map(({ title, link }) =>
|
|
link ? (
|
|
<li key={title} className={styles.submenuItem}>
|
|
<Link
|
|
href={link.url}
|
|
variant="menu"
|
|
className={styles.link}
|
|
onClick={handleNavigate}
|
|
>
|
|
{title}
|
|
<ArrowRightIcon
|
|
color="burgundy"
|
|
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>
|
|
)
|
|
}
|