119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import {
|
|
ArrowRightIcon,
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
} from "@/components/Icons"
|
|
import Card from "@/components/TempDesignSystem/Card"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
|
|
import MainMenuButton from "../../MainMenuButton"
|
|
|
|
import styles from "./navigationMenuItem.module.css"
|
|
|
|
import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
|
|
|
|
export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
|
|
const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
|
|
const { submenu, title, link, seeAllLink, card } = item
|
|
const isMegaMenuOpen = openMegaMenu === title
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isMegaMenuOpen) {
|
|
toggleMegaMenu(false)
|
|
}
|
|
})
|
|
|
|
function handleLinkClick() {
|
|
toggleMegaMenu(false)
|
|
}
|
|
|
|
return submenu.length ? (
|
|
<span className={styles.menuWrapper}>
|
|
<MainMenuButton
|
|
onClick={() => toggleMegaMenu(title)}
|
|
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
|
|
>
|
|
{title}
|
|
{isMobile ? (
|
|
<ChevronRightIcon className={`${styles.chevron}`} color="red" />
|
|
) : (
|
|
<ChevronDownIcon
|
|
className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
|
|
color="red"
|
|
/>
|
|
)}
|
|
</MainMenuButton>
|
|
{isMegaMenuOpen ? (
|
|
<nav className={styles.megaMenu}>
|
|
<div className={styles.seeAllLink}>
|
|
{seeAllLink?.link ? (
|
|
<Link
|
|
href={seeAllLink?.link?.url}
|
|
color="burgundy"
|
|
variant="icon"
|
|
onClick={handleLinkClick}
|
|
>
|
|
{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>{item.title}</span>
|
|
</Caption>
|
|
<ul className={styles.submenu}>
|
|
{item.links.map((link) =>
|
|
link?.link ? (
|
|
<li key={link.title} className={styles.submenuItem}>
|
|
<Link
|
|
href={link.link?.url}
|
|
color="burgundy"
|
|
className={styles.link}
|
|
onClick={handleLinkClick}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</li>
|
|
) : null
|
|
)}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{card ? (
|
|
<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={handleLinkClick}
|
|
onSecondaryButtonClick={handleLinkClick}
|
|
theme="image"
|
|
/>
|
|
) : null}
|
|
</nav>
|
|
) : null}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
|
|
color="burgundy"
|
|
href={link!.url}
|
|
>
|
|
{title}
|
|
</Link>
|
|
)
|
|
}
|