67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
|
|
import MainMenuButton from "../../MainMenuButton"
|
|
import MegaMenu from "../MegaMenu"
|
|
|
|
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)
|
|
}
|
|
})
|
|
|
|
return submenu.length ? (
|
|
<>
|
|
<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>
|
|
<div
|
|
className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
|
|
>
|
|
{isMegaMenuOpen ? (
|
|
<MegaMenu
|
|
isMobile={isMobile}
|
|
title={title}
|
|
seeAllLink={seeAllLink}
|
|
submenu={submenu}
|
|
card={card}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<Link
|
|
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
|
|
color="burgundy"
|
|
href={link!.url}
|
|
>
|
|
{title}
|
|
</Link>
|
|
)
|
|
}
|