42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { createFileRoute, Outlet, useRouterState } from '@tanstack/react-router';
|
|
import { AppSidebar } from '@/components/sidebar/app-sidebar';
|
|
import { SiteHeader } from '@/components/site-header';
|
|
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
|
|
import { navData } from '@/lib/navData';
|
|
|
|
export const Route = createFileRoute('/_workbenchLayout')({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const pathname = useRouterState({ select: state => state.location.pathname });
|
|
const allNavItems = [...navData.navMain, ...navData.navSecondary];
|
|
const title
|
|
= allNavItems.find(item =>
|
|
item.url === '/'
|
|
? pathname === '/'
|
|
: pathname.startsWith(item.url),
|
|
)?.title ?? '工作台';
|
|
|
|
return (
|
|
<SidebarProvider
|
|
style={
|
|
{
|
|
'--sidebar-width': 'calc(var(--spacing) * 72)',
|
|
'--header-height': 'calc(var(--spacing) * 12)',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<AppSidebar navData={navData} variant="inset" />
|
|
<SidebarInset>
|
|
<SiteHeader title={title} />
|
|
<div className="flex flex-1 flex-col">
|
|
<div className="@container/main flex flex-1 flex-col gap-2">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|