Sidebar - Copy this React, Tailwind Component to your project

import { useState } from "react"; import { FiHome, FiShoppingBag, FiUsers, FiBarChart2, FiSettings, FiBox, FiChevronDown, FiChevronRight, FiMenu, FiX } from "react-icons/fi"; const Sidebar = () => { const [isOpen, setIsOpen] = useState(true); const [expandedMenus, setExpandedMenus] = useState([]); const [activeItem, setActiveItem] = useState("dashboard"); const menuItems = [ { id: "dashboard", label: "Dashboard", icon: FiHome, path: "/dashboard" }, { id: "orders", label: "Orders", icon: FiShoppingBag, subItems: [ { id: "all-orders", label: "All Orders", path: "/orders" }, { id: "pending", label: "Pending Orders", path: "/orders/pending" }, { id: "completed", label: "Completed Orders", path: "/orders/completed" } ] }, { id: "products", label: "Products", icon: FiBox, subItems: [ { id: "all-products", label: "All Products", path: "/products" }, { id: "add-product", label: "Add Product", path: "/products/add" }, { id: "categories", label: "Categories", path: "/products/categories" } ] }, { id: "customers", label: "Customers", icon: FiUsers, path: "/customers" }, { id: "analytics", label: "Analytics", icon: FiBarChart2, path: "/analytics" }, { id: "settings", label: "Settings", icon: FiSettings, subItems: [ { id: "general", label: "General", path: "/settings/general" }, { id: "security", label: "Security", path: "/settings/security" }, { id: "notifications", label: "Notifications", path: "/settings/notifications" } ] } ]; const toggleSidebar = () => setIsOpen(!isOpen); const toggleSubMenu = (menuId) => { setExpandedMenus(expandedMenus.includes(menuId) ? expandedMenus.filter(id => id !== menuId) : [...expandedMenus, menuId] ); }; const handleMenuClick = (menuId, path) => { setActiveItem(menuId); // Handle navigation logic here }; return ( <div className="relative"> {/* Mobile Menu Toggle */} <button onClick={toggleSidebar} className="fixed top-4 left-4 z-50 p-2 rounded-lg bg-white shadow-lg md:hidden focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label="Toggle Menu" > {isOpen ? <FiX size={24} /> : <FiMenu size={24} />} </button> {/* Sidebar */} <aside className={`fixed top-0 left-0 h-screen bg-white shadow-xl transition-all duration-300 ease-in-out z-40 ${isOpen ? "w-64" : "w-20"} ${isOpen ? "translate-x-0" : "-translate-x-0"} md:translate-x-0`} aria-label="Sidebar Navigation" > {/* Logo Area */} <div className="h-16 flex items-center justify-center border-b"> <span className={`font-bold text-xl text-blue-600 ${!isOpen && "hidden"}`}> Admin Panel </span> </div> {/* Navigation Menu */} <nav className="mt-4 px-2" role="navigation"> {menuItems.map((item) => ( <div key={item.id} className="mb-2"> <button onClick={() => item.subItems ? toggleSubMenu(item.id) : handleMenuClick(item.id, item.path)} className={`w-full flex items-center px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 ${activeItem === item.id && "bg-blue-50 text-blue-600"}`} aria-expanded={item.subItems ? expandedMenus.includes(item.id) : undefined} aria-current={activeItem === item.id ? "page" : undefined} > <item.icon className="w-5 h-5" /> {isOpen && ( <> <span className="ml-3 flex-1 text-left">{item.label}</span> {item.subItems && ( expandedMenus.includes(item.id) ? <FiChevronDown className="w-5 h-5" /> : <FiChevronRight className="w-5 h-5" /> )} </> )} </button> {/* SubMenu Items */} {item.subItems && isOpen && expandedMenus.includes(item.id) && ( <div className="ml-4 mt-2 space-y-1"> {item.subItems.map((subItem) => ( <button key={subItem.id} onClick={() => handleMenuClick(subItem.id, subItem.path)} className={`w-full flex items-center px-4 py-2 text-sm rounded-lg text-gray-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 ${activeItem === subItem.id && "bg-blue-50 text-blue-600"}`} aria-current={activeItem === subItem.id ? "page" : undefined} > <span className="ml-3">{subItem.label}</span> </button> ))} </div> )} </div> ))} </nav> </aside> </div> ); }; export default Sidebar;