Ebube
36 lines
909 B
TypeScript
36 lines
909 B
TypeScript
import React, { useState } from "react";
|
|
import { LowerMenuItem } from "./Header";
|
|
|
|
interface MenuItemProps {
|
|
item: LowerMenuItem;
|
|
}
|
|
|
|
const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
|
|
const [showSubMenu, setShowSubMenu] = useState<boolean>(false);
|
|
|
|
const toggleSubMenu = () => {
|
|
setShowSubMenu(!showSubMenu);
|
|
};
|
|
|
|
return (
|
|
<li
|
|
className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]`}
|
|
onMouseEnter={toggleSubMenu}
|
|
onMouseLeave={toggleSubMenu}
|
|
>
|
|
<a href={item.linkPath}>{item.name}</a>
|
|
{showSubMenu && item.subItems && (
|
|
<ul
|
|
className={`absolute bg-white shadow-md p-4 z-20 `}
|
|
>
|
|
{item.subItems.map((subItem, index) => (
|
|
<HeaderMenuItem key={index} item={subItem} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default HeaderMenuItem;
|