Files
web/components/Header/MainMenu/MenuItem/index.tsx
2024-09-03 13:26:15 +02:00

38 lines
882 B
TypeScript

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