Sidebar

import { FileText, Home, Settings, Users } from 'lucide-react'
import {
  Sidebar,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarItem,
} from '@/components/ui/sidebar'

export default function SidebarBasic() {
  return (
    <div className="flex h-80 w-full max-w-2xl overflow-hidden rounded-lg border border-border">
      <Sidebar label="Workspace">
        <SidebarHeader className="text-headline">Northwind</SidebarHeader>
        <SidebarGroup label="Workspace">
          <SidebarItem href="#home" icon={<Home />} active>
            Home
          </SidebarItem>
          <SidebarItem href="#invoices" icon={<FileText />}>
            Invoices
          </SidebarItem>
          <SidebarItem href="#customers" icon={<Users />}>
            Customers
          </SidebarItem>
        </SidebarGroup>
        <SidebarFooter>
          <SidebarGroup>
            <SidebarItem href="#settings" icon={<Settings />}>
              Settings
            </SidebarItem>
          </SidebarGroup>
        </SidebarFooter>
      </Sidebar>
      <div className="flex-1 p-6 text-body-sm text-muted-foreground">Page content</div>
    </div>
  )
}