website refactor

apps/website/components/layout/SidebarContext.tsx

@@ -0,0 +1,48 @@
+'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;
+}