@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/navigation/Sidebar.md

@@ -0,0 +1,330 @@
+# Sidebar
+
+Story: @alexgorbatchev/shadcn/components/navigation/Sidebar
+Source: src/components/stories/navigation/Sidebar.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Sidebar.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, Button, DensityProvider, DirectionProvider, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { Input } from "@base-ui/react/input";
+import type { ComponentProps, ReactElement } from "react";
+import { useRef, useState } from "react";
+import { FileIcon, HomeIcon, PlusIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Sidebar
+```
+
+## Default args
+
+```tsx
+{ collapsible: "icon" }
+```
+
+## Default render
+
+```tsx
+(args) => (<SidebarProvider>
+      <Layout {...args}/>
+    </SidebarProvider>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### WorkspaceMenus
+
+```tsx
+{
+    render: () => <WorkspaceLayout />
+}
+```
+
+### NativeRenderContracts
+
+```tsx
+{
+    render: () => <RenderContracts />
+}
+```
+
+### IconCollapse
+
+```tsx
+{}
+```
+
+### Offcanvas
+
+```tsx
+{
+    args: { collapsible: "offcanvas" }
+}
+```
+
+### NonCollapsible
+
+```tsx
+{
+    args: { collapsible: "none" }
+}
+```
+
+### NestedTheme
+
+```tsx
+{
+    args: { collapsible: "none" },
+    globals: { theme: "dark" },
+    render: (args) => (<div data-theme="light" data-testid="Sidebar--nested-theme" className="bg-background text-foreground">
+      <SidebarProvider>
+        <Layout {...args}/>
+      </SidebarProvider>
+    </div>)
+}
+```
+
+### KeyboardShortcut
+
+```tsx
+{}
+```
+
+### Controlled
+
+```tsx
+{
+    render: (args) => <ControlledLayout {...args}/>
+}
+```
+
+### ObserverCallback
+
+```tsx
+{
+    render: (args) => (<SidebarProvider onOpenChange={fn()}>
+      <Layout {...args}/>
+    </SidebarProvider>)
+}
+```
+
+### IconTooltip
+
+```tsx
+{
+    render: (args) => (<SidebarProvider defaultOpen={false}>
+      <Layout {...args}/>
+    </SidebarProvider>)
+}
+```
+
+### Floating
+
+```tsx
+{
+    args: { variant: "floating", collapsible: "icon" }
+}
+```
+
+### CompactDensity
+
+```tsx
+{
+    render: (args) => (<DensityProvider density="compact">
+      <SidebarProvider>
+        <Layout {...args}/>
+      </SidebarProvider>
+    </DensityProvider>)
+}
+```
+
+### ComfortableDensity
+
+```tsx
+{
+    render: (args) => (<DensityProvider density="comfortable">
+      <SidebarProvider>
+        <Layout {...args}/>
+      </SidebarProvider>
+    </DensityProvider>)
+}
+```
+
+### Inset
+
+```tsx
+{
+    args: { variant: "inset", collapsible: "icon" }
+}
+```
+
+### RightSide
+
+```tsx
+{
+    args: { side: "right" }
+}
+```
+
+### MobileSheet
+
+```tsx
+{
+    render: (args) => (<SidebarProvider density="compact">
+      <Layout {...args}/>
+    </SidebarProvider>)
+}
+```
+
+### MobileRightRtl
+
+```tsx
+{
+    render: (args) => (<SidebarProvider density="compact">
+      <Layout {...args}/>
+    </SidebarProvider>),
+    args: { side: "right", dir: "rtl" }
+}
+```
+
+### MobileInheritedRtl
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <SidebarProvider>
+        <Layout {...args}/>
+      </SidebarProvider>
+    </DirectionProvider>)
+}
+```
+
+### Loading
+
+```tsx
+{
+    render: (args) => (<SidebarProvider>
+      <Sidebar {...args} aria-label="Loading projects">
+        <SidebarHeader>Loading projects</SidebarHeader>
+        <SidebarContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuSkeleton showIcon role="status" aria-label="Loading navigation"/>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuSkeleton role="status" aria-label="Loading another item"/>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>)
+}
+```
+
+### CollapsibleGroup
+
+```tsx
+{
+    render: (args) => (<SidebarProvider>
+      <Sidebar {...args} aria-label="Collapsible navigation">
+        <SidebarContent>
+          <Collapsible defaultOpen>
+            <SidebarGroup>
+              <SidebarGroupLabel render={<CollapsibleTrigger />}>Project folders</SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton render={<a href="#folder"/>}>Folder link</SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <SidebarTrigger />
+      </SidebarInset>
+    </SidebarProvider>)
+}
+```
+
+### NativeInputCallback
+
+```tsx
+{
+    render: (args) => {
+        const [isDisabled, setIsDisabled] = useState(false);
+        return (<SidebarProvider>
+        <Sidebar {...args} collapsible="none" aria-label="Input callback navigation">
+          <SidebarHeader>
+            <SidebarInput aria-label="State-aware search" disabled={isDisabled} className={inputClassName} ref={inputRef} onValueChange={inputValueChange}/>
+          </SidebarHeader>
+        </Sidebar>
+        <SidebarInset>
+          <Button onClick={() => setIsDisabled(!isDisabled)}>{isDisabled ? "Enable search" : "Disable search"}</Button>
+        </SidebarInset>
+      </SidebarProvider>);
+    }
+}
+```
+
+### TrailingContent
+
+```tsx
+{
+    render: () => (<SidebarProvider>
+      <div style={{ width: 180 }}>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton trailing={123456} onClick={fn()}>
+              <FileIcon />
+              <span>A very long playlist title that must truncate</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </div>
+    </SidebarProvider>)
+}
+```
+
+### InstanceIsolation
+
+```tsx
+{
+    render: () => (<div className="flex flex-col gap-4">
+      <button type="button">Host control</button>
+      <SidebarProvider data-testid="First sidebar" className="min-h-0">
+        <SidebarInput aria-label="First search"/>
+        <SidebarTrigger aria-label="First toggle"/>
+      </SidebarProvider>
+      <SidebarProvider data-testid="Second sidebar" className="min-h-0">
+        <SidebarInput aria-label="Second search"/>
+        <SidebarTrigger aria-label="Second toggle"/>
+      </SidebarProvider>
+    </div>)
+}
+```
+
+### OwnerPersistence
+
+```tsx
+{}
+```