115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
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 { useTrapFocus } from "@/hooks/useTrapFocus"
|
|
|
|
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,
|
|
}: MegaMenuProps) {
|
|
const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
|
|
useDropdownStore()
|
|
const megaMenuRef = useTrapFocus()
|
|
|
|
function handleNavigate() {
|
|
toggleMegaMenu(false)
|
|
if (isHamburgerMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<nav className={styles.megaMenu}>
|
|
{isMobile ? (
|
|
<div className={styles.backWrapper}>
|
|
<button
|
|
type="button"
|
|
className={styles.backButton}
|
|
onClick={() => toggleMegaMenu(false)}
|
|
>
|
|
<ChevronLeftIcon color="red" />
|
|
<Subtitle type="one" color="burgundy">
|
|
{title}
|
|
</Subtitle>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
<div className={styles.megaMenuContent} ref={megaMenuRef}>
|
|
<div className={styles.seeAllLink}>
|
|
{seeAllLink?.link ? (
|
|
<Link
|
|
href={seeAllLink.link.url}
|
|
color="burgundy"
|
|
variant="icon"
|
|
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 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"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|