admin-inset-layout

1import { AppHeader } from "@/components/app-header"
2import { AppSidebar } from "@/components/app-sidebar"
3import {
4  Breadcrumb,
5  BreadcrumbItem,
6  BreadcrumbLink,
7  BreadcrumbList,
8  BreadcrumbPage,
9  BreadcrumbSeparator,
10} from "@/components/ui/breadcrumb"
11import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
12 
13export default function Page() {
14  return (
15    <div className="bg-sidebar flex h-screen w-full flex-col overflow-hidden">
16      <AppHeader />
17      <div className="flex flex-1 overflow-hidden pt-12">
18        <SidebarProvider
19          className="min-h-0 !pr-0"
20          style={
21            {
22              "--sidebar-width": "15.25rem",
23              "--sidebar-width-mobile": "15.25rem",
24            } as React.CSSProperties
25          }
26        >
27          <AppSidebar />
28          <div className="flex flex-1 overflow-hidden py-3 sm:pr-3">
29            <SidebarInset
30              className="flex flex-1 flex-col overscroll-none rounded-sm border md:shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_3px_0_rgba(0,0,0,0.04)] dark:md:shadow-[0_1px_2px_0_rgba(0,0,0,0.2),0_1px_3px_0_rgba(0,0,0,0.15)]"
31              style={{
32                WebkitOverflowScrolling: "auto",
33                overscrollBehavior: "none",
34              }}
35            >
36              <header className="flex h-16 shrink-0 items-center gap-2 overscroll-none border-b">
37                <div className="flex items-center gap-2 px-4">
38                  <Breadcrumb>
39                    <BreadcrumbList>
40                      <BreadcrumbItem className="hidden md:block">
41                        <BreadcrumbLink href="#">
42                          Building Your Application
43                        </BreadcrumbLink>
44                      </BreadcrumbItem>
45                      <BreadcrumbSeparator className="hidden md:block" />
46                      <BreadcrumbItem>
47                        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
48                      </BreadcrumbItem>
49                    </BreadcrumbList>
50                  </Breadcrumb>
51                </div>
52              </header>
53              <div
54// … truncated