Sidebar

1
import { Sidebar } from "@/components/ui/sidebar"
2
import { Home, Settings, Users, Inbox, PanelLeft } from "lucide-react"
3
4
export default function Layout({ children }) {
5
  const [collapsed, setCollapsed] = React.useState(false)
6
7
  return (
8
    <div className="flex min-h-svh">
9
      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
10
        <Sidebar.Header>
11
          <span className="text-sm font-semibold">Drivn</span>
12
        </Sidebar.Header>
13
        <Sidebar.Content>
14
          <Sidebar.Group heading="Menu">
15
            <Sidebar.Item icon={Home} active>Dashboard</Sidebar.Item>
16
            <Sidebar.Item icon={Inbox} badge={3}>Inbox</Sidebar.Item>
17
            <Sidebar.Item icon={Users}>Team</Sidebar.Item>
18
          </Sidebar.Group>
19
        </Sidebar.Content>
20
      </Sidebar>
21
      <main className="flex-1">
22
        <header className="flex items-center gap-3 px-4 py-3 border-b">
23
          <button onClick={() => setCollapsed(!collapsed)}>
24
            <PanelLeft className="w-4 h-4" />
25
          </button>
26
          <h1>Dashboard</h1>
27
        </header>
28
        <div className="p-6">{children}</div>
29
      </main>
30
    </div>
31
  )
32
}