Dashboard Context - Copy this React, Tailwind Component to your project

import React, { useContext } from "react"; import { FiHome, FiUsers, FiBox, FiBarChart2, FiSettings, FiMenu, FiX } from "react-icons/fi"; const Sidebardash = () => { const { sidebarOpen, setSidebarOpen, activeLink, setActiveLink } = useContext(DashboardContext); const navItems = [ { id: "home", icon: <FiHome />, label: "Home" }, { id: "users", icon: <FiUsers />, label: "Users" }, { id: "products", icon: <FiBox />, label: "Products" }, { id: "analytics", icon: <FiBarChart2 />, label: "Analytics" }, { id: "settings", icon: <FiSettings />, label: "Settings" } ]; return ( <div className={`fixed left-0 top-0 h-full bg-white shadow-lg transition-all duration-300 ${sidebarOpen ? "w-64" : "w-20"}`}> <div className="flex items-center justify-between p-4"> <img src="https://images.unsplash.com/photo-1563906267088-b029e7101114" alt="Logo" className="h-8 w-auto" /> <button onClick={() => setSidebarOpen(!sidebarOpen)} className="text-gray-500 hover:text-gray-700"> {sidebarOpen ? <FiX size={24} /> : <FiMenu size={24} />} </button> </div> <UserProfile sidebarOpen={sidebarOpen} /> <QuickActions sidebarOpen={sidebarOpen} /> <nav className="mt-8"> {navItems.map((item) => ( <button key={item.id} onClick={() => setActiveLink(item.id)} className={`flex items-center w-full p-4 transition-colors ${activeLink === item.id ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50" }`} > <span className="text-xl">{item.icon}</span> {sidebarOpen && <span className="ml-4">{item.label}</span>} </button> ))} <CollapsibleMenu sidebarOpen={sidebarOpen} /> </nav> <SidebarFooter sidebarOpen={sidebarOpen} /> </div> ); }; const UserProfile = ({ sidebarOpen }) => { return ( <div className="flex items-center p-4"> <img src="https://via.placeholder.com/40" alt="User Avatar" className="h-10 w-10 rounded-full" /> {sidebarOpen && ( <div className="ml-4"> <p className="font-semibold text-gray-800">John Doe</p> <p className="text-sm text-gray-500">Admin</p> </div> )} </div> ); }; const QuickActions = ({ sidebarOpen }) => { return ( <div className="mt-6 px-4"> <button className="flex items-center w-full px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg"> <FiPlus className="text-lg" /> {sidebarOpen && <span className="ml-2">Create New</span>} </button> </div> ); }; const CollapsibleMenu = ({ sidebarOpen }) => { const [isOpen, setIsOpen] = React.useState(false); return ( <div> <button onClick={() => setIsOpen(!isOpen)} className="flex items-center w-full p-4 text-gray-600 hover:bg-gray-50" > <FiFolder className="text-xl" /> {sidebarOpen && <span className="ml-4">Projects</span>} {sidebarOpen && ( <span className="ml-auto"> {isOpen ? <FiChevronUp /> : <FiChevronDown />} </span> )} </button> {isOpen && sidebarOpen && ( <div className="ml-8 space-y-2"> <button className="block w-full text-left text-gray-600 hover:text-blue-600">Project 1</button> <button className="block w-full text-left text-gray-600 hover:text-blue-600">Project 2</button> </div> )} </div> ); }; const SidebarFooter = ({ sidebarOpen }) => { return ( <div className="absolute bottom-0 w-full p-4"> <button className="flex items-center w-full p-2 text-gray-600 hover:bg-gray-50"> <FiLogOut className="text-xl" /> {sidebarOpen && <span className="ml-4">Logout</span>} </button> </div> ); }; export default Sidebardash;