shadcn-glass-ui 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/context7.json +17 -2
- package/dist/shadcn-glass-ui.css +1 -1
- package/docs/AI_USAGE.md +5 -5
- package/docs/BEST_PRACTICES.md +1 -1
- package/docs/COMPONENTS_CATALOG.md +215 -0
- package/docs/EXPORTS_MAP.json +140 -14
- package/docs/EXPORTS_STRUCTURE.md +43 -9
- package/docs/GETTING_STARTED.md +1 -1
- package/docs/REGISTRY_USAGE.md +1 -1
- package/docs/api/README.md +1 -1
- package/docs/components/SIDEBAR_GLASS.md +555 -0
- package/docs/components/SPLIT_LAYOUT_GLASS.md +304 -365
- package/package.json +3 -2
|
@@ -0,0 +1,555 @@
|
|
|
1
|
+
# SidebarGlass
|
|
2
|
+
|
|
3
|
+
Collapsible sidebar navigation component with glassmorphism styling. 100% API compatible with
|
|
4
|
+
shadcn/ui Sidebar.
|
|
5
|
+
|
|
6
|
+
## Overview
|
|
7
|
+
|
|
8
|
+
`SidebarGlass` provides a modern sidebar navigation with collapsible behavior, mobile drawer mode,
|
|
9
|
+
and glassmorphism effects. It follows the shadcn/ui Sidebar API exactly, making migration seamless.
|
|
10
|
+
|
|
11
|
+
### Key Features
|
|
12
|
+
|
|
13
|
+
- **100% shadcn/ui Compatible** - Drop-in replacement for shadcn/ui Sidebar
|
|
14
|
+
- **Compound Component API** - Provider, Root, Header, Content, Footer, and more
|
|
15
|
+
- **Mobile Drawer** - Renders as ModalGlass sheet on mobile
|
|
16
|
+
- **Desktop Collapsible** - Three modes: offcanvas, icon, none
|
|
17
|
+
- **Interactive Rail** - Click or drag to toggle sidebar
|
|
18
|
+
- **Keyboard Shortcut** - Toggle with Cmd/Ctrl + B
|
|
19
|
+
- **Cookie Persistence** - Remember sidebar state across sessions
|
|
20
|
+
- **Glassmorphism** - Backdrop blur, glow effects, CSS variables
|
|
21
|
+
- **Theme Support** - Works with all 3 themes (glass, light, aurora)
|
|
22
|
+
|
|
23
|
+
### Browser Compatibility
|
|
24
|
+
|
|
25
|
+
- Chrome 89+
|
|
26
|
+
- Firefox 87+
|
|
27
|
+
- Safari 14.1+
|
|
28
|
+
- Edge 89+
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Installation
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { SidebarGlass, useSidebar } from 'shadcn-glass-ui';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Compound API Reference
|
|
41
|
+
|
|
42
|
+
### Component Structure
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<SidebarGlass.Provider>
|
|
46
|
+
{' '}
|
|
47
|
+
// Context provider (required)
|
|
48
|
+
<SidebarGlass.Root>
|
|
49
|
+
{' '}
|
|
50
|
+
// Main sidebar container (aside)
|
|
51
|
+
<SidebarGlass.Header /> // Sticky header
|
|
52
|
+
<SidebarGlass.Content>
|
|
53
|
+
{' '}
|
|
54
|
+
// Scrollable content
|
|
55
|
+
<SidebarGlass.Group>
|
|
56
|
+
{' '}
|
|
57
|
+
// Navigation group
|
|
58
|
+
<SidebarGlass.GroupLabel />
|
|
59
|
+
<SidebarGlass.GroupContent>
|
|
60
|
+
<SidebarGlass.Menu>
|
|
61
|
+
<SidebarGlass.MenuItem>
|
|
62
|
+
<SidebarGlass.MenuButton />
|
|
63
|
+
</SidebarGlass.MenuItem>
|
|
64
|
+
</SidebarGlass.Menu>
|
|
65
|
+
</SidebarGlass.GroupContent>
|
|
66
|
+
</SidebarGlass.Group>
|
|
67
|
+
</SidebarGlass.Content>
|
|
68
|
+
<SidebarGlass.Footer /> // Sticky footer
|
|
69
|
+
<SidebarGlass.Rail /> // Collapse/expand rail
|
|
70
|
+
</SidebarGlass.Root>
|
|
71
|
+
<SidebarGlass.Inset>
|
|
72
|
+
{' '}
|
|
73
|
+
// Main content wrapper
|
|
74
|
+
<main>...</main>
|
|
75
|
+
</SidebarGlass.Inset>
|
|
76
|
+
</SidebarGlass.Provider>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Full Component List
|
|
80
|
+
|
|
81
|
+
| Component | Description |
|
|
82
|
+
| --------------- | ------------------------------------- |
|
|
83
|
+
| `Provider` | Context provider, wraps entire layout |
|
|
84
|
+
| `Root` | Main sidebar container (`<aside>`) |
|
|
85
|
+
| `Header` | Sticky header section |
|
|
86
|
+
| `Content` | Scrollable content area |
|
|
87
|
+
| `Footer` | Sticky footer section |
|
|
88
|
+
| `Rail` | Interactive collapse/expand rail |
|
|
89
|
+
| `Inset` | Main content area wrapper (`<main>`) |
|
|
90
|
+
| `Trigger` | Toggle button |
|
|
91
|
+
| `Separator` | Visual divider |
|
|
92
|
+
| `Group` | Navigation group container |
|
|
93
|
+
| `GroupLabel` | Group title |
|
|
94
|
+
| `GroupAction` | Group action button |
|
|
95
|
+
| `GroupContent` | Group content wrapper |
|
|
96
|
+
| `Menu` | Menu list (`<ul>`) |
|
|
97
|
+
| `MenuItem` | Menu item (`<li>`) |
|
|
98
|
+
| `MenuButton` | Clickable menu item |
|
|
99
|
+
| `MenuAction` | Menu item action button |
|
|
100
|
+
| `MenuBadge` | Menu item badge |
|
|
101
|
+
| `MenuSkeleton` | Menu item loading skeleton |
|
|
102
|
+
| `MenuSub` | Submenu list |
|
|
103
|
+
| `MenuSubItem` | Submenu item |
|
|
104
|
+
| `MenuSubButton` | Submenu button |
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Props API
|
|
109
|
+
|
|
110
|
+
### Provider Props
|
|
111
|
+
|
|
112
|
+
| Prop | Type | Default | Description |
|
|
113
|
+
| ------------------ | ------------------------------------ | ----------------- | ---------------------------------- |
|
|
114
|
+
| `side` | `'left' \| 'right'` | `'left'` | Sidebar position |
|
|
115
|
+
| `variant` | `'sidebar' \| 'floating' \| 'inset'` | `'sidebar'` | Visual style |
|
|
116
|
+
| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` | Collapse behavior |
|
|
117
|
+
| `open` | `boolean` | - | Controlled open state |
|
|
118
|
+
| `onOpenChange` | `(open: boolean) => void` | - | Open state change handler |
|
|
119
|
+
| `defaultOpen` | `boolean` | `true` | Initial open state |
|
|
120
|
+
| `cookieName` | `string` | `'sidebar:state'` | Cookie name for persistence |
|
|
121
|
+
| `keyboardShortcut` | `string \| false` | `'b'` | Keyboard shortcut (Cmd/Ctrl + key) |
|
|
122
|
+
|
|
123
|
+
### Root Props
|
|
124
|
+
|
|
125
|
+
| Prop | Type | Default | Description |
|
|
126
|
+
| ------------- | -------------------- | ------- | ----------------------------- |
|
|
127
|
+
| `side` | `SidebarSide` | - | Override Provider side |
|
|
128
|
+
| `variant` | `SidebarVariant` | - | Override Provider variant |
|
|
129
|
+
| `collapsible` | `SidebarCollapsible` | - | Override Provider collapsible |
|
|
130
|
+
| `className` | `string` | - | Custom className |
|
|
131
|
+
|
|
132
|
+
### MenuButton Props
|
|
133
|
+
|
|
134
|
+
| Prop | Type | Default | Description |
|
|
135
|
+
| ---------- | --------------------------- | ----------- | --------------------------------- |
|
|
136
|
+
| `asChild` | `boolean` | `false` | Use Radix Slot for custom element |
|
|
137
|
+
| `isActive` | `boolean` | `false` | Active/selected state |
|
|
138
|
+
| `tooltip` | `string` | - | Tooltip text (shown in icon mode) |
|
|
139
|
+
| `variant` | `'default' \| 'outline'` | `'default'` | Button variant |
|
|
140
|
+
| `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | Button size |
|
|
141
|
+
|
|
142
|
+
### Trigger Props
|
|
143
|
+
|
|
144
|
+
| Prop | Type | Default | Description |
|
|
145
|
+
| ----------- | --------- | ------- | --------------------------------- |
|
|
146
|
+
| `asChild` | `boolean` | `false` | Use Radix Slot for custom trigger |
|
|
147
|
+
| `className` | `string` | - | Custom className |
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## Usage Examples
|
|
152
|
+
|
|
153
|
+
### Basic Sidebar
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { SidebarGlass } from 'shadcn-glass-ui';
|
|
157
|
+
import { Home, Settings, Users } from 'lucide-react';
|
|
158
|
+
|
|
159
|
+
export function AppLayout({ children }) {
|
|
160
|
+
return (
|
|
161
|
+
<SidebarGlass.Provider>
|
|
162
|
+
<SidebarGlass.Root>
|
|
163
|
+
<SidebarGlass.Header>
|
|
164
|
+
<Logo />
|
|
165
|
+
</SidebarGlass.Header>
|
|
166
|
+
<SidebarGlass.Content>
|
|
167
|
+
<SidebarGlass.Menu>
|
|
168
|
+
<SidebarGlass.MenuItem>
|
|
169
|
+
<SidebarGlass.MenuButton isActive>
|
|
170
|
+
<Home className="w-4 h-4" />
|
|
171
|
+
Dashboard
|
|
172
|
+
</SidebarGlass.MenuButton>
|
|
173
|
+
</SidebarGlass.MenuItem>
|
|
174
|
+
<SidebarGlass.MenuItem>
|
|
175
|
+
<SidebarGlass.MenuButton>
|
|
176
|
+
<Users className="w-4 h-4" />
|
|
177
|
+
Users
|
|
178
|
+
</SidebarGlass.MenuButton>
|
|
179
|
+
</SidebarGlass.MenuItem>
|
|
180
|
+
<SidebarGlass.MenuItem>
|
|
181
|
+
<SidebarGlass.MenuButton>
|
|
182
|
+
<Settings className="w-4 h-4" />
|
|
183
|
+
Settings
|
|
184
|
+
</SidebarGlass.MenuButton>
|
|
185
|
+
</SidebarGlass.MenuItem>
|
|
186
|
+
</SidebarGlass.Menu>
|
|
187
|
+
</SidebarGlass.Content>
|
|
188
|
+
<SidebarGlass.Footer>
|
|
189
|
+
<UserMenu />
|
|
190
|
+
</SidebarGlass.Footer>
|
|
191
|
+
</SidebarGlass.Root>
|
|
192
|
+
<SidebarGlass.Inset>
|
|
193
|
+
<main>{children}</main>
|
|
194
|
+
</SidebarGlass.Inset>
|
|
195
|
+
</SidebarGlass.Provider>
|
|
196
|
+
);
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
### With Groups
|
|
203
|
+
|
|
204
|
+
```tsx
|
|
205
|
+
<SidebarGlass.Provider>
|
|
206
|
+
<SidebarGlass.Root>
|
|
207
|
+
<SidebarGlass.Content>
|
|
208
|
+
<SidebarGlass.Group>
|
|
209
|
+
<SidebarGlass.GroupLabel>Main</SidebarGlass.GroupLabel>
|
|
210
|
+
<SidebarGlass.GroupContent>
|
|
211
|
+
<SidebarGlass.Menu>
|
|
212
|
+
<SidebarGlass.MenuItem>
|
|
213
|
+
<SidebarGlass.MenuButton isActive>
|
|
214
|
+
<Home /> Dashboard
|
|
215
|
+
</SidebarGlass.MenuButton>
|
|
216
|
+
</SidebarGlass.MenuItem>
|
|
217
|
+
</SidebarGlass.Menu>
|
|
218
|
+
</SidebarGlass.GroupContent>
|
|
219
|
+
</SidebarGlass.Group>
|
|
220
|
+
|
|
221
|
+
<SidebarGlass.Separator />
|
|
222
|
+
|
|
223
|
+
<SidebarGlass.Group>
|
|
224
|
+
<SidebarGlass.GroupLabel>Settings</SidebarGlass.GroupLabel>
|
|
225
|
+
<SidebarGlass.GroupAction asChild>
|
|
226
|
+
<button>
|
|
227
|
+
<Plus />
|
|
228
|
+
</button>
|
|
229
|
+
</SidebarGlass.GroupAction>
|
|
230
|
+
<SidebarGlass.GroupContent>
|
|
231
|
+
<SidebarGlass.Menu>
|
|
232
|
+
<SidebarGlass.MenuItem>
|
|
233
|
+
<SidebarGlass.MenuButton>
|
|
234
|
+
<Settings /> Settings
|
|
235
|
+
</SidebarGlass.MenuButton>
|
|
236
|
+
</SidebarGlass.MenuItem>
|
|
237
|
+
</SidebarGlass.Menu>
|
|
238
|
+
</SidebarGlass.GroupContent>
|
|
239
|
+
</SidebarGlass.Group>
|
|
240
|
+
</SidebarGlass.Content>
|
|
241
|
+
</SidebarGlass.Root>
|
|
242
|
+
</SidebarGlass.Provider>
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
### Icon Mode (Collapsible)
|
|
248
|
+
|
|
249
|
+
```tsx
|
|
250
|
+
<SidebarGlass.Provider collapsible="icon">
|
|
251
|
+
<SidebarGlass.Root>
|
|
252
|
+
<SidebarGlass.Content>
|
|
253
|
+
<SidebarGlass.Menu>
|
|
254
|
+
<SidebarGlass.MenuItem>
|
|
255
|
+
<SidebarGlass.MenuButton tooltip="Dashboard">
|
|
256
|
+
<Home /> Dashboard
|
|
257
|
+
</SidebarGlass.MenuButton>
|
|
258
|
+
</SidebarGlass.MenuItem>
|
|
259
|
+
<SidebarGlass.MenuItem>
|
|
260
|
+
<SidebarGlass.MenuButton tooltip="Settings">
|
|
261
|
+
<Settings /> Settings
|
|
262
|
+
</SidebarGlass.MenuButton>
|
|
263
|
+
</SidebarGlass.MenuItem>
|
|
264
|
+
</SidebarGlass.Menu>
|
|
265
|
+
</SidebarGlass.Content>
|
|
266
|
+
<SidebarGlass.Rail />
|
|
267
|
+
</SidebarGlass.Root>
|
|
268
|
+
</SidebarGlass.Provider>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
When collapsed, only icons are shown and tooltips appear on hover.
|
|
272
|
+
|
|
273
|
+
---
|
|
274
|
+
|
|
275
|
+
### Right Side
|
|
276
|
+
|
|
277
|
+
```tsx
|
|
278
|
+
<SidebarGlass.Provider side="right">
|
|
279
|
+
<SidebarGlass.Inset>
|
|
280
|
+
<main>Content</main>
|
|
281
|
+
</SidebarGlass.Inset>
|
|
282
|
+
<SidebarGlass.Root>{/* Sidebar on right side */}</SidebarGlass.Root>
|
|
283
|
+
</SidebarGlass.Provider>
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
---
|
|
287
|
+
|
|
288
|
+
### Floating Variant
|
|
289
|
+
|
|
290
|
+
```tsx
|
|
291
|
+
<SidebarGlass.Provider variant="floating">
|
|
292
|
+
<SidebarGlass.Root>{/* Sidebar with margin and rounded corners */}</SidebarGlass.Root>
|
|
293
|
+
</SidebarGlass.Provider>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
---
|
|
297
|
+
|
|
298
|
+
### With Submenus
|
|
299
|
+
|
|
300
|
+
```tsx
|
|
301
|
+
<SidebarGlass.Menu>
|
|
302
|
+
<SidebarGlass.MenuItem>
|
|
303
|
+
<SidebarGlass.MenuButton>
|
|
304
|
+
<Folder /> Documents
|
|
305
|
+
</SidebarGlass.MenuButton>
|
|
306
|
+
<SidebarGlass.MenuSub>
|
|
307
|
+
<SidebarGlass.MenuSubItem>
|
|
308
|
+
<SidebarGlass.MenuSubButton>
|
|
309
|
+
<File /> Recent
|
|
310
|
+
</SidebarGlass.MenuSubButton>
|
|
311
|
+
</SidebarGlass.MenuSubItem>
|
|
312
|
+
<SidebarGlass.MenuSubItem>
|
|
313
|
+
<SidebarGlass.MenuSubButton>
|
|
314
|
+
<Star /> Starred
|
|
315
|
+
</SidebarGlass.MenuSubButton>
|
|
316
|
+
</SidebarGlass.MenuSubItem>
|
|
317
|
+
</SidebarGlass.MenuSub>
|
|
318
|
+
</SidebarGlass.MenuItem>
|
|
319
|
+
</SidebarGlass.Menu>
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
---
|
|
323
|
+
|
|
324
|
+
### With Badges
|
|
325
|
+
|
|
326
|
+
```tsx
|
|
327
|
+
<SidebarGlass.MenuItem>
|
|
328
|
+
<SidebarGlass.MenuButton>
|
|
329
|
+
<Inbox /> Inbox
|
|
330
|
+
<SidebarGlass.MenuBadge>12</SidebarGlass.MenuBadge>
|
|
331
|
+
</SidebarGlass.MenuButton>
|
|
332
|
+
</SidebarGlass.MenuItem>
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
### With Actions
|
|
338
|
+
|
|
339
|
+
```tsx
|
|
340
|
+
<SidebarGlass.MenuItem>
|
|
341
|
+
<SidebarGlass.MenuButton>
|
|
342
|
+
<File /> document.pdf
|
|
343
|
+
</SidebarGlass.MenuButton>
|
|
344
|
+
<SidebarGlass.MenuAction asChild>
|
|
345
|
+
<button onClick={handleDelete}>
|
|
346
|
+
<Trash />
|
|
347
|
+
</button>
|
|
348
|
+
</SidebarGlass.MenuAction>
|
|
349
|
+
</SidebarGlass.MenuItem>
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
---
|
|
353
|
+
|
|
354
|
+
### Loading State
|
|
355
|
+
|
|
356
|
+
```tsx
|
|
357
|
+
<SidebarGlass.Menu>
|
|
358
|
+
<SidebarGlass.MenuItem>
|
|
359
|
+
<SidebarGlass.MenuSkeleton showIcon />
|
|
360
|
+
</SidebarGlass.MenuItem>
|
|
361
|
+
<SidebarGlass.MenuItem>
|
|
362
|
+
<SidebarGlass.MenuSkeleton />
|
|
363
|
+
</SidebarGlass.MenuItem>
|
|
364
|
+
</SidebarGlass.Menu>
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
---
|
|
368
|
+
|
|
369
|
+
### Controlled State
|
|
370
|
+
|
|
371
|
+
```tsx
|
|
372
|
+
function App() {
|
|
373
|
+
const [open, setOpen] = useState(true);
|
|
374
|
+
|
|
375
|
+
return (
|
|
376
|
+
<SidebarGlass.Provider open={open} onOpenChange={setOpen}>
|
|
377
|
+
<button onClick={() => setOpen(!open)}>Toggle</button>
|
|
378
|
+
<SidebarGlass.Root>{/* ... */}</SidebarGlass.Root>
|
|
379
|
+
</SidebarGlass.Provider>
|
|
380
|
+
);
|
|
381
|
+
}
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
---
|
|
385
|
+
|
|
386
|
+
## Hook: useSidebar()
|
|
387
|
+
|
|
388
|
+
Access the SidebarGlass context from any child component:
|
|
389
|
+
|
|
390
|
+
```tsx
|
|
391
|
+
import { useSidebar } from 'shadcn-glass-ui';
|
|
392
|
+
|
|
393
|
+
function MyComponent() {
|
|
394
|
+
const {
|
|
395
|
+
// State
|
|
396
|
+
state, // 'expanded' | 'collapsed'
|
|
397
|
+
open, // Desktop open state
|
|
398
|
+
setOpen, // Set desktop open
|
|
399
|
+
openMobile, // Mobile open state
|
|
400
|
+
setOpenMobile, // Set mobile open
|
|
401
|
+
|
|
402
|
+
// Responsive
|
|
403
|
+
isMobile, // Is mobile viewport
|
|
404
|
+
|
|
405
|
+
// Config
|
|
406
|
+
side, // 'left' | 'right'
|
|
407
|
+
variant, // 'sidebar' | 'floating' | 'inset'
|
|
408
|
+
collapsible, // 'offcanvas' | 'icon' | 'none'
|
|
409
|
+
|
|
410
|
+
// Actions
|
|
411
|
+
toggleSidebar, // Toggle open state
|
|
412
|
+
} = useSidebar();
|
|
413
|
+
|
|
414
|
+
return <button onClick={toggleSidebar}>{state === 'expanded' ? 'Collapse' : 'Expand'}</button>;
|
|
415
|
+
}
|
|
416
|
+
```
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## Collapsible Modes
|
|
421
|
+
|
|
422
|
+
### Offcanvas (Default)
|
|
423
|
+
|
|
424
|
+
Sidebar slides completely off screen when collapsed.
|
|
425
|
+
|
|
426
|
+
```tsx
|
|
427
|
+
<SidebarGlass.Provider collapsible="offcanvas">
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
### Icon
|
|
431
|
+
|
|
432
|
+
Sidebar collapses to icon-only width. Text is hidden, tooltips shown on hover.
|
|
433
|
+
|
|
434
|
+
```tsx
|
|
435
|
+
<SidebarGlass.Provider collapsible="icon">
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
### None
|
|
439
|
+
|
|
440
|
+
Sidebar cannot be collapsed.
|
|
441
|
+
|
|
442
|
+
```tsx
|
|
443
|
+
<SidebarGlass.Provider collapsible="none">
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
---
|
|
447
|
+
|
|
448
|
+
## CSS Variables
|
|
449
|
+
|
|
450
|
+
SidebarGlass uses CSS variables for theming:
|
|
451
|
+
|
|
452
|
+
```css
|
|
453
|
+
:root {
|
|
454
|
+
--sidebar-width: 16rem;
|
|
455
|
+
--sidebar-width-mobile: 18rem;
|
|
456
|
+
--sidebar-width-icon: 3rem;
|
|
457
|
+
--sidebar-bg: oklch(var(--glass-bg));
|
|
458
|
+
--sidebar-foreground: oklch(var(--foreground));
|
|
459
|
+
--sidebar-border: oklch(var(--border));
|
|
460
|
+
--sidebar-backdrop-blur: 16px;
|
|
461
|
+
--sidebar-glow: 0 0 20px oklch(var(--glow-color));
|
|
462
|
+
}
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
467
|
+
## Responsive Behavior
|
|
468
|
+
|
|
469
|
+
### Desktop
|
|
470
|
+
|
|
471
|
+
- Sidebar renders as collapsible aside
|
|
472
|
+
- Rail provides toggle interaction
|
|
473
|
+
- Keyboard shortcut active
|
|
474
|
+
|
|
475
|
+
### Mobile
|
|
476
|
+
|
|
477
|
+
- Sidebar renders as ModalGlass drawer
|
|
478
|
+
- Overlay appears when open
|
|
479
|
+
- Swipe to close (via ModalGlass)
|
|
480
|
+
|
|
481
|
+
---
|
|
482
|
+
|
|
483
|
+
## Accessibility
|
|
484
|
+
|
|
485
|
+
### Semantic HTML
|
|
486
|
+
|
|
487
|
+
- Uses `<aside>` for sidebar (complementary landmark)
|
|
488
|
+
- Uses `<nav>` for menu (navigation landmark)
|
|
489
|
+
- Uses `<main>` for inset content
|
|
490
|
+
|
|
491
|
+
### Keyboard Navigation
|
|
492
|
+
|
|
493
|
+
- **Cmd/Ctrl + B:** Toggle sidebar
|
|
494
|
+
- **Tab:** Navigate through menu items
|
|
495
|
+
- **Enter/Space:** Activate menu item
|
|
496
|
+
- **Escape:** Close mobile drawer
|
|
497
|
+
|
|
498
|
+
### ARIA
|
|
499
|
+
|
|
500
|
+
- Menu items use `role="menuitem"`
|
|
501
|
+
- Active state via `aria-current="page"`
|
|
502
|
+
- Expandable sections use `aria-expanded`
|
|
503
|
+
|
|
504
|
+
---
|
|
505
|
+
|
|
506
|
+
## Migration from shadcn/ui
|
|
507
|
+
|
|
508
|
+
SidebarGlass is 100% API compatible with shadcn/ui Sidebar:
|
|
509
|
+
|
|
510
|
+
```tsx
|
|
511
|
+
// Before (shadcn/ui)
|
|
512
|
+
import { Sidebar, SidebarProvider } from '@/components/ui/sidebar';
|
|
513
|
+
|
|
514
|
+
// After (Glass UI)
|
|
515
|
+
import { SidebarGlass } from 'shadcn-glass-ui';
|
|
516
|
+
|
|
517
|
+
// Usage is identical
|
|
518
|
+
<SidebarGlass.Provider>
|
|
519
|
+
<SidebarGlass.Root>{/* Same API */}</SidebarGlass.Root>
|
|
520
|
+
</SidebarGlass.Provider>;
|
|
521
|
+
```
|
|
522
|
+
|
|
523
|
+
---
|
|
524
|
+
|
|
525
|
+
## Related Components
|
|
526
|
+
|
|
527
|
+
- **[SplitLayoutGlass](./SPLIT_LAYOUT_GLASS.md)** - Two-column layout (master-detail pattern)
|
|
528
|
+
- **[ModalGlass](./MODAL_GLASS.md)** - Modal dialog (used for mobile drawer)
|
|
529
|
+
- **[GlassCard](./GLASS_CARD.md)** - Base glass container
|
|
530
|
+
|
|
531
|
+
---
|
|
532
|
+
|
|
533
|
+
## Changelog
|
|
534
|
+
|
|
535
|
+
### v2.1.4 (2025-12-XX)
|
|
536
|
+
|
|
537
|
+
- Initial release
|
|
538
|
+
- 100% shadcn/ui API compatibility
|
|
539
|
+
- Mobile drawer mode
|
|
540
|
+
- Three collapsible variants
|
|
541
|
+
- Complete documentation
|
|
542
|
+
|
|
543
|
+
---
|
|
544
|
+
|
|
545
|
+
## Support
|
|
546
|
+
|
|
547
|
+
- **GitHub Issues:** [Report bugs](https://github.com/yhooi2/shadcn-glass-ui-library/issues)
|
|
548
|
+
- **Storybook:** [View live examples](https://yhooi2.github.io/shadcn-glass-ui-library/)
|
|
549
|
+
- **Documentation:** [CLAUDE.md](../../CLAUDE.md) for AI assistants
|
|
550
|
+
|
|
551
|
+
---
|
|
552
|
+
|
|
553
|
+
## License
|
|
554
|
+
|
|
555
|
+
MIT License - Part of [shadcn-glass-ui-library](https://github.com/yhooi2/shadcn-glass-ui-library)
|