@darksnow-ui/sidebar v1.0.0

Sidebar

A composable sidebar component for building application layouts.

Installation

npm install @darksnow-ui/sidebar

Peer Dependencies

npm install react react-dom

Usage

import { Sidebar } from "@darksnow-ui/sidebar"

export function SidebarExample() {
  return (
    <Sidebar className="w-64">
      <nav className="space-y-2 p-4">
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          Dashboard
        </a>
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          Projects
        </a>
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          Settings
        </a>
      </nav>
    </Sidebar>
  )
}

Props

Examples

Basic Sidebar

<div className="flex h-screen">
  <Sidebar className="w-64 border-r">
    <div className="p-4">
      <h2 className="text-lg font-semibold mb-4">Navigation</h2>
      <nav className="space-y-2">
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          Home
        </a>
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          About
        </a>
        <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
          Contact
        </a>
      </nav>
    </div>
  </Sidebar>
  <main className="flex-1 p-6">
    <h1>Main Content</h1>
  </main>
</div>

Collapsible Sidebar

function CollapsibleSidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false)

  return (
    <Sidebar className={cn("transition-all", isCollapsed ? "w-16" : "w-64")}>
      <div className="p-4">
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setIsCollapsed(!isCollapsed)}
        >
          <MenuIcon className="h-4 w-4" />
        </Button>
        {!isCollapsed && (
          <nav className="mt-4 space-y-2">
            <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
              Dashboard
            </a>
            <a href="#" className="block px-3 py-2 rounded-md hover:bg-theme-accent">
              Projects
            </a>
          </nav>
        )}
      </div>
    </Sidebar>
  )
}

Right Sidebar

<div className="flex h-screen">
  <main className="flex-1 p-6">
    <h1>Main Content</h1>
  </main>
  <Sidebar side="right" className="w-64 border-l">
    <div className="p-4">
      <h3 className="font-medium mb-4">Actions</h3>
      <div className="space-y-2">
        <Button className="w-full">Edit</Button>
        <Button variant="outline" className="w-full">Share</Button>
        <Button variant="destructive" className="w-full">Delete</Button>
      </div>
    </div>
  </Sidebar>
</div>

Accessibility

• Semantic HTML structure
• Keyboard navigation support
• Screen reader accessible
• Focus management

Styling

Uses DarkSnow UI design tokens for consistent theming.

Related Components

• Sheet - Slide-out panels
• Navigation Menu - Site navigation