1+ import type React from 'react' ;
12import type { ReactElement } from 'react' ;
23
34import { Outlet } from '@tanstack/react-router' ;
45
56import { AsyncBoundary } from '../ui/async-boundary' ;
67import { Separator } from '../ui/separator' ;
7- import { SidebarProvider , SidebarTrigger } from '../ui/sidebar' ;
8+ import { SidebarInset , SidebarProvider , SidebarTrigger } from '../ui/sidebar' ;
89import { AppBreadcrumbs } from './app-breadcrumbs' ;
910import { AppSidebar } from './app-sidebar' ;
1011
@@ -14,23 +15,37 @@ interface Props {
1415
1516export function AdminLayout ( { className } : Props ) : ReactElement {
1617 return (
17- < SidebarProvider className = { className } >
18+ < SidebarProvider
19+ className = { className }
20+ style = {
21+ {
22+ '--sidebar-width' : 'calc(var(--spacing) * 72)' ,
23+ '--header-height' : 'calc(var(--spacing) * 12)' ,
24+ } as React . CSSProperties
25+ }
26+ >
1827 < AppSidebar />
19- < div className = "flex h-full w-full flex-col" >
20- < header className = "flex h-16 items-center gap-2 px-6" >
21- < SidebarTrigger />
22- < Separator
23- orientation = "vertical"
24- className = "mr-2 data-[orientation=vertical]:h-4"
25- />
26- < AppBreadcrumbs />
28+ < SidebarInset >
29+ < header className = "flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)" >
30+ < div className = "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6" >
31+ < SidebarTrigger className = "-ml-1" />
32+ < Separator
33+ orientation = "vertical"
34+ className = "mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
35+ />
36+ < AppBreadcrumbs />
37+ </ div >
2738 </ header >
28- < main className = "flex-1 p-4" >
29- < AsyncBoundary >
30- < Outlet />
31- </ AsyncBoundary >
32- </ main >
33- </ div >
39+ < div className = "flex flex-1 flex-col" >
40+ < div className = "@container/main flex flex-1 flex-col gap-2" >
41+ < main className = "flex flex-col gap-4 py-4 md:gap-6 md:py-6" >
42+ < AsyncBoundary >
43+ < Outlet />
44+ </ AsyncBoundary >
45+ </ main >
46+ </ div >
47+ </ div >
48+ </ SidebarInset >
3449 </ SidebarProvider >
3550 ) ;
3651}
0 commit comments