Feature Rich Menu - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import Link from "next/link"; import { Box, Collapse } from "@mui/material"; // Import Collapse for dropdown effect const SidebarItem = ({ label, items, showText }: any) => { const isBrowser = typeof window !== 'undefined'; const pathName: any = isBrowser ? window.location.pathname : ''; const lastPart = pathName.substring(pathName.lastIndexOf('/') + 1); const [selectedItem, setSelectedItem] = useState(lastPart); const [openItems, setOpenItems] = useState<string[]>([]); // To handle open/close states of nested items const handleItemClick = (title: any) => { setSelectedItem(title); }; const toggleSubItems = (title: string) => { if (openItems.includes(title)) { setOpenItems(openItems.filter(item => item !== title)); // Collapse if already opened } else { setOpenItems([...openItems, title]); // Expand if not opened } }; const renderItems = (menuItems: any) => { return menuItems.map((item: any, index: any) => { const hasSubItems = item.items && item.items.length > 0; return ( <div key={index} style={{ marginLeft: showText ? 10 : 0 }}> <div onClick={() => { handleItemClick(item.title); if (hasSubItems) { toggleSubItems(item.title); } }} className={`text-[#0e66b1] sidebar-item ${selectedItem === item.title ? 'selected' : ''}`} > <item.icon sx={{ fontSize: 26, marginLeft: 1, marginRight: 1 }} /> {showText && <span>{item.title}</span>} </div> {/* Render sub-items if they exist */} {hasSubItems && ( <Collapse in={openItems.includes(item.title)} timeout="auto" unmountOnExit> <Box ml={3}> {renderItems(item.items)} </Box> </Collapse> )} </div> ); }); }; return ( <div className="sidebar-container" style={{ alignItems: showText ? "" : "center" }}> <span className="text-[#0F4E85] font-bold" style={{ marginLeft: showText ? 10 : 0, fontSize: 14 }}>{showText ? label : "..."}</span> {renderItems(items)} </div> ); }; export default SidebarItem;