Sidebar Context

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SidebarGlass Context
4 *
5 * Provides state management for SidebarGlass compound component.
6 * 100% compatible with shadcn/ui Sidebar API.
7 *
8 * @module sidebar-context
9 */
10 
11import {
12  createContext,
13  useContext,
14  useState,
15  useCallback,
16  useMemo,
17  useEffect,
18  type FC,
19  type ReactNode,
20} from 'react';
21 
22// ========================================
23// TYPES
24// ========================================
25 
26export type SidebarSide = 'left' | 'right';
27export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
28export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
29 
30/**
31 * Context value for SidebarGlass compound components
32 * 100% compatible with shadcn/ui useSidebar() hook
33 */
34export interface SidebarContextValue {
35  /** Sidebar state: "expanded" | "collapsed" */
36  state: 'expanded' | 'collapsed';
37  /** Whether sidebar is open (desktop) */
38  open: boolean;
39  /** Set sidebar open state */
40  setOpen: (open: boolean) => void;
41  /** Whether mobile drawer is open */
42  openMobile: boolean;
43  /** Set mobile drawer open state */
44  setOpenMobile: (open: boolean) => void;
45  /** Whether viewport is mobile */
46  isMobile: boolean;
47  /** Toggle sidebar open/close */
48  toggleSidebar: () => void;
49 
50  // === CONFIG ===
51  /** Which side the sidebar is on */
52  side: SidebarSide;
53  /** Sidebar variant */
54  variant: SidebarVariant;
55  /** Collapsible mode */
56  collapsible: SidebarCollapsible;
57}
58 
59// ========================================
60// CONSTANTS
61// ========================================
62 
63const MOBILE_BREAKPOINT = 768;
64const SIDEBAR_COOKIE_NAME = 'sidebar:state';
65const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
66 
67// ========================================
68// CONTEXT
69// ========================================
70 
71const SidebarContext = createContext<SidebarContextValue | null>(null);
72 
73/**
74 * Hook to access Sidebar context (100% shadcn compatible)
75 *
76 * @throws Error if used outside of SidebarGlass.Provider
77 *
78 * @example
79 * ```tsx
80 * function MyComponent() {
81 *   const { state, open, toggleSidebar, isMobile } = useSidebar();
82 *
83 *   return (
84 *     <button onClick={toggleSidebar}>
85 *       {state === 'expanded' ? 'Collapse' : 'Expand'}
86 *     </button>
87 *   );
88 * }
89 * ```
90 */
91export function useSidebar(): SidebarContextValue {
92  const context = useContext(SidebarContext);
93  if (!context) {
94    throw new Error(
95      'useSidebar must be used within SidebarGlass.Provider. ' +
96// … truncated