Files
web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
Erik Tiekstra 0dcb5a796a chore: cleanup
2024-09-03 13:26:15 +02:00

36 lines
940 B
TypeScript

"use client"
import { useState } from "react"
import { ChevronDownIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import MainMenuButton from "../../MainMenuButton"
import styles from "./navigationMenuItem.module.css"
import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
export default function MenuItem({ item }: NavigationMenuItemProps) {
const { children, title, href, seeAllLinkText, infoCard } = item
const [isExpanded, setIsExpanded] = useState(false)
function handleButtonClick() {
setIsExpanded((prev) => !prev)
}
return children?.length ? (
<MainMenuButton onClick={handleButtonClick}>
{title}
<ChevronDownIcon
className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
color="red"
/>
</MainMenuButton>
) : (
<Link href={href} color="burgundy">
{title}
</Link>
)
}