Sidebar Glass

1/**
2 * SidebarGlass Core Components
3 *
4 * Layout components for building sidebars with glassmorphism effects.
5 * **100% API compatible with shadcn/ui Sidebar.**
6 *
7 * ## Features
8 * - shadcn/ui Sidebar API compatibility
9 * - Theme-aware glassmorphism styling (glass/light/aurora)
10 * - Compound component API (13+ sub-components)
11 * - Three collapsible modes: offcanvas, icon, none
12 * - Three variants: sidebar (default), floating, inset
13 * - Left/right side positioning
14 * - Mobile drawer (automatic ModalGlass integration)
15 * - Keyboard shortcut (Cmd/Ctrl + B to toggle)
16 * - Cookie persistence for open/closed state
17 * - Nested submenu support
18 * - Loading skeletons
19 * - Badge notifications
20 *
21 * ## CSS Variables
22 * - `--sidebar-width` - Desktop width (default: `16rem`)
23 * - `--sidebar-width-mobile` - Mobile drawer width (default: `18rem`)
24 * - `--sidebar-width-icon` - Icon mode width (default: `3rem`)
25 * - `--sidebar-bg` - Background color
26 * - `--sidebar-border` - Border color
27 * - `--sidebar-primary` - Primary accent color
28 * - `--sidebar-primary-foreground` - Primary text color
29 * - `--sidebar-accent` - Hover background
30 * - `--sidebar-accent-foreground` - Hover text color
31 * - `--sidebar-ring` - Focus ring color
32 * - `--sidebar-glow` - Box shadow with glow effect
33 * - `--sidebar-backdrop-blur` - Backdrop blur amount
34 * - `--sidebar-foreground` - Text color
35 *
36 * @since v1.0.0
37 * @module sidebar-glass
38 */
39 
40import {
41  forwardRef,
42  type ReactNode,
43  type CSSProperties,
44  type ComponentPropsWithoutRef,
45} from 'react';
46import { PanelLeft } from 'lucide-react';
47import { Slot } from '@radix-ui/react-slot';
48import { cn } from '@/lib/utils';
49import {
50  useSidebar,
51  type SidebarSide,
52  type SidebarVariant,
53  type SidebarCollapsible,
54} from './sidebar-context';
55import { ModalGlass } from '@/components/glass/ui/modal-glass';
56import '@/glass-theme.css';
57 
58// ========================================
59// SIDEBAR ROOT
60// ========================================
61 
62export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
63  children: ReactNode;
64  /** Override side from provider */
65  side?: SidebarSide;
66  /** Override variant from provider */
67  variant?: SidebarVariant;
68  /** Override collapsible from provider */
69  collapsible?: SidebarCollapsible;
70}
71 
72/**
73 * SidebarGlass.Root - Main sidebar container
74 *
75 * @example
76 * ```tsx
77 * <SidebarGlass.Root>
78 *   <SidebarGlass.Header />
79 *   <SidebarGlass.Content>...</SidebarGlass.Content>
80// … truncated