Sidebar-2

1import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
2import { AppHeader } from "../../components/app-header"
3import { AppSidebar } from "../../components/app-sidebar"
4 
5// Customize the expanded sidebar width via the `--sidebar-width` CSS variable.
6const SIDEBAR_PROVIDER_STYLE = {
7    "--sidebar-width": "14rem",
8} as React.CSSProperties
9 
10export default function Page() {
11    return (
12        <SidebarProvider defaultOpen={false} className="min-h-0 flex-1" style={SIDEBAR_PROVIDER_STYLE}>
13            <div className="flex min-h-svh w-full flex-col">
14                <AppHeader />
15 
16                <div className="flex min-h-0 flex-1">
17                    <AppSidebar />
18 
19                    <SidebarInset className="bg-sidebar">
20                        {/* This area acts as a placeholder canvas for the page content preview. */}
21                        <div className="flex flex-1 flex-col p-4">
22                            <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
23                        </div>
24                    </SidebarInset>
25                </div>
26            </div>
27        </SidebarProvider>
28    )
29}