Sidebar 04

1import { AppSidebar } from "@/registry/base-vega/blocks/sidebar-04/components/app-sidebar"
2import {
3  Breadcrumb,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbList,
7  BreadcrumbPage,
8  BreadcrumbSeparator,
9} from "@/registry/base-vega/ui/breadcrumb"
10import { Separator } from "@/registry/base-vega/ui/separator"
11import {
12  SidebarInset,
13  SidebarProvider,
14  SidebarTrigger,
15} from "@/registry/base-vega/ui/sidebar"
16 
17export default function Page() {
18  return (
19    <SidebarProvider
20      style={
21        {
22          "--sidebar-width": "19rem",
23        } as React.CSSProperties
24      }
25    >
26      <AppSidebar />
27      <SidebarInset>
28        <header className="flex h-16 shrink-0 items-center gap-2 px-4">
29          <SidebarTrigger className="-ml-1" />
30          <Separator
31            orientation="vertical"
32            className="mr-2 data-vertical:h-4 data-vertical:self-auto"
33          />
34          <Breadcrumb>
35            <BreadcrumbList>
36              <BreadcrumbItem className="hidden md:block">
37                <BreadcrumbLink href="#">Build Your Application</BreadcrumbLink>
38              </BreadcrumbItem>
39              <BreadcrumbSeparator className="hidden md:block" />
40              <BreadcrumbItem>
41                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
42              </BreadcrumbItem>
43            </BreadcrumbList>
44          </Breadcrumb>
45        </header>
46        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
47          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
48            <div className="aspect-video rounded-xl bg-muted/50" />
49            <div className="aspect-video rounded-xl bg-muted/50" />
50            <div className="aspect-video rounded-xl bg-muted/50" />
51          </div>
52          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
53        </div>
54      </SidebarInset>
55    </SidebarProvider>
56  )
57}