import { createContext, useContext, useState, useEffect } from "react"; type SidebarContextType = { isExpanded: boolean; isMobileOpen: boolean; isHovered: boolean; activeItem: string | null; openSubmenu: string | null; toggleSidebar: () => void; toggleMobileSidebar: () => void; setIsHovered: (isHovered: boolean) => void; setActiveItem: (item: string | null) => void; toggleSubmenu: (item: string) => void; }; const SidebarContext = createContext(undefined); export const useSidebar = () => { const context = useContext(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider"); } return context; }; export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { const [isExpanded, setIsExpanded] = useState(true); const [isMobileOpen, setIsMobileOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); const [isHovered, setIsHovered] = useState(false); const [activeItem, setActiveItem] = useState(null); const [openSubmenu, setOpenSubmenu] = useState(null); useEffect(() => { const handleResize = () => { const mobile = window.innerWidth < 768; setIsMobile(mobile); if (!mobile) { setIsMobileOpen(false); } }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); const toggleSidebar = () => { setIsExpanded((prev) => !prev); }; const toggleMobileSidebar = () => { setIsMobileOpen((prev) => !prev); }; const toggleSubmenu = (item: string) => { setOpenSubmenu((prev) => (prev === item ? null : item)); }; return ( {children} ); };