So it try to loop an menuItems but i need to put an SubMenu on it here is my code:
const menuItems = [
{ id: 1, label: "Dashboard", icon: MdOutlineSpaceDashboard, link: "/" },
{
id: 2,
label: "Master Data",
icon: MdAssignmentReturned,
link: "/MasterData",
},
{ id: 3, label: "Check COGM", icon: MdRemoveRedEye, link: "/Check" },
{
id: 4,
label: "Calculation",
icon: MdOutlineCalculate,
link: "/tutorials",
},
{
id: 5,
label: "Draft Calculation",
icon: MdAssignmentReturned,
link: "/Draft",
},
{ id: 6, label: "Approved", icon: MdAssignmentReturned, link: "/Approved" },
{ id: 7, label: "Task Activity", icon: MdAssignmentReturned, link: "/Task" },
];
const SideNavbar = () => {
return (
<div>
<Disclosure as="nav">
<Disclosure.Button className="absolute top-4 right-4 inline-flex items-center peer justify-center rounded-md p-2 text-gray-800 hover:bg-gray-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white group">
<GiHamburgerMenu
className="block md:hidden h-6 w-6"
aria-hidden="true"
/>
</Disclosure.Button>
<div className="p-6 w-1/2 h-screen bg-yellow z-20 fixed top-0 -left-96 lg:left-0 lg:w-60 peer-focus:left-0 peer:transition ease-out delay-150 duration-200">
<div className="flex flex-col justify-start item-center mb-10">
<Image
src={Logo_Nabati}
width={123}
height={75}
alt="logo Nabati"
/>
</div>
<div className=" my-4 mt-50 border-gray-100 pb-4">
{menuItems.map(({ icon: Icon, ...menu }, index) => {
return (
// eslint-disable-next-line react/jsx-key
<div key={index}>
<Link href={menu.link}>
<a className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto">
<Icon className="text-2xl text-white group-hover:text-red " />
<h3 className="text-base text-white group-hover:text-red font-semibold ">
{menu.label}
</h3>
</a>
</Link>
</div>
);
})}
etc....
is there a possible way for me to put the Submenu on the Menu Items? and loop it on the div? or i have to make some logic again on the component to make it have sub menu on it