115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import NextLink from "next/link"
|
|
import { useRef } from "react"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import useClickOutside from "@/hooks/useClickOutside"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
|
|
import MainMenuButton from "../../MainMenuButton"
|
|
import MegaMenu from "../MegaMenu"
|
|
|
|
import styles from "./navigationMenuItem.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
|
|
|
|
export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
|
|
const { openMegaMenu, toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
|
|
useDropdownStore()
|
|
const megaMenuRef = useRef<HTMLDivElement>(null)
|
|
const { submenu, title, link, seeAllLink, card } = item
|
|
const megaMenuTitle = `${title}-${isMobile ? "mobile" : "desktop"}`
|
|
const isMegaMenuOpen = openMegaMenu === megaMenuTitle
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isMegaMenuOpen) {
|
|
toggleMegaMenu(false)
|
|
}
|
|
})
|
|
|
|
useClickOutside(megaMenuRef, isMegaMenuOpen && !isMobile, () => {
|
|
toggleMegaMenu(false)
|
|
})
|
|
|
|
function handleNavigate() {
|
|
if (isHamburgerMenuOpen) {
|
|
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
|
|
}
|
|
}
|
|
|
|
if (submenu.length) {
|
|
return (
|
|
<>
|
|
<MainMenuButton
|
|
onPress={() => toggleMegaMenu(megaMenuTitle)}
|
|
className={styles.navigationMenuItem}
|
|
>
|
|
{isMobile ? (
|
|
<>
|
|
<Typography variant="Title/Subtitle/lg">
|
|
<span>{title}</span>
|
|
</Typography>
|
|
<MaterialIcon
|
|
icon="arrow_forward_ios"
|
|
size={20}
|
|
className={styles.chevron}
|
|
color="CurrentColor"
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span>{title}</span>
|
|
<MaterialIcon
|
|
icon="keyboard_arrow_down"
|
|
size={20}
|
|
className={cx(styles.chevron, {
|
|
[styles.isExpanded]: isMegaMenuOpen,
|
|
})}
|
|
color="CurrentColor"
|
|
/>
|
|
</>
|
|
)}
|
|
</MainMenuButton>
|
|
<div
|
|
ref={megaMenuRef}
|
|
className={cx(styles.dropdown, {
|
|
[styles.isExpanded]: isMegaMenuOpen,
|
|
})}
|
|
>
|
|
<MegaMenu
|
|
isMobile={isMobile}
|
|
title={title}
|
|
seeAllLink={seeAllLink}
|
|
submenu={submenu}
|
|
card={card}
|
|
isOpen={isMegaMenuOpen}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
} else if (link?.url) {
|
|
return (
|
|
<Typography
|
|
variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
|
|
>
|
|
<NextLink
|
|
className={cx(styles.navigationMenuItem, styles.link)}
|
|
onClick={handleNavigate}
|
|
href={link.url}
|
|
>
|
|
{title}
|
|
</NextLink>
|
|
</Typography>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|