Sidebar

A collapsible sidebar navigation component for app layouts.

Installation

bash

npx @smicolon/fasla-ui@latest add sidebar

Run init once per project before adding components. See Installation.

Preview

Components

Sidebar: Main container
SidebarHeader: Header section
SidebarContent: Scrollable content area
SidebarFooter: Footer section
SidebarGroup: Grouped items with label
SidebarItem: Navigation item with icon
SidebarCollapseButton: Toggle collapse state

Props

Prop	Type	Default	Description
`collapsed`	`boolean`	`false`	Collapses it to icons only.
`onCollapsedChange`	`(collapsed) => void`	—	Called when it collapses or expands.
`width`	`"sm" \| "default" \| "lg"`	`"default"`	Width when expanded.
`children`	`ReactNode`	—	The sidebar’s parts.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

"use client"

import { useState } from "react"
import { LayoutDashboard, Package, Settings, ShoppingCart } from "lucide-react"
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarItem,
  SidebarCollapseButton,
} from "@/components/blocks/sidebar"

const items = [
  { label: "Dashboard", icon: <LayoutDashboard className="size-4" /> },
  { label: "Orders", icon: <ShoppingCart className="size-4" /> },
  { label: "Products", icon: <Package className="size-4" /> },
  { label: "Settings", icon: <Settings className="size-4" /> },
]

export function StoreSidebar() {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
      <SidebarHeader>
        {!collapsed && <span className="font-semibold">My store</span>}
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup label={collapsed ? undefined : "Store"}>
          {items.map((item, index) => (
            <SidebarItem key={item.label} icon={item.icon} active={index === 0} collapsed={collapsed}>
              {item.label}
            </SidebarItem>
          ))}
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarCollapseButton
          collapsed={collapsed}
          onCollapsedChange={setCollapsed}
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
        />
      </SidebarFooter>
    </Sidebar>
  )
}