49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
|
|
interface SidebarContextType {
|
|
isCollapsed: boolean;
|
|
toggleCollapse: () => void;
|
|
setCollapsed: (collapsed: boolean) => void;
|
|
}
|
|
|
|
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
|
|
|
|
export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
|
|
// Persist state (optional, but good for UX)
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('sidebar-collapsed');
|
|
if (stored) setIsCollapsed(stored === 'true');
|
|
}, []);
|
|
|
|
const toggleCollapse = () => {
|
|
setIsCollapsed((prev) => {
|
|
const next = !prev;
|
|
localStorage.setItem('sidebar-collapsed', String(next));
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const setCollapsed = (collapsed: boolean) => {
|
|
setIsCollapsed(collapsed);
|
|
localStorage.setItem('sidebar-collapsed', String(collapsed));
|
|
};
|
|
|
|
return (
|
|
<SidebarContext.Provider value={{ isCollapsed, toggleCollapse, setCollapsed }}>
|
|
{children}
|
|
</SidebarContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useSidebar() {
|
|
const context = useContext(SidebarContext);
|
|
if (context === undefined) {
|
|
throw new Error('useSidebar must be used within a SidebarProvider');
|
|
}
|
|
return context;
|
|
}
|