108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Menu, type LucideIcon } from "lucide-react";
|
|
|
|
import { DashboardSidebar } from "@/components/dashboard/sidebar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import type { RootNavItem } from "@/lib/root-navigation";
|
|
|
|
type DashboardLayoutProps = {
|
|
title: string;
|
|
description: string;
|
|
icon?: LucideIcon;
|
|
items: RootNavItem[];
|
|
sidebarIconSrc?: string;
|
|
sidebarBrandHref?: string;
|
|
sidebarBrandHoverLabel?: string;
|
|
sidebarTop?: ReactNode;
|
|
sidebarFooterItems?: RootNavItem[];
|
|
sidebarFooter?: ReactNode;
|
|
headerActions?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function DashboardLayout({
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
items,
|
|
sidebarIconSrc,
|
|
sidebarBrandHref,
|
|
sidebarBrandHoverLabel,
|
|
sidebarTop,
|
|
sidebarFooterItems,
|
|
sidebarFooter,
|
|
headerActions,
|
|
children,
|
|
}: DashboardLayoutProps) {
|
|
return (
|
|
<div className="min-h-screen bg-muted/30">
|
|
<div className="grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]">
|
|
<aside className="hidden border-r border-border/70 bg-sidebar/60 lg:sticky lg:top-0 lg:block lg:h-screen">
|
|
<DashboardSidebar
|
|
items={items}
|
|
iconSrc={sidebarIconSrc}
|
|
brandHref={sidebarBrandHref}
|
|
brandHoverLabel={sidebarBrandHoverLabel}
|
|
top={sidebarTop}
|
|
footerItems={sidebarFooterItems}
|
|
footer={sidebarFooter}
|
|
/>
|
|
</aside>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border/70 bg-background/95 px-4 backdrop-blur lg:px-6">
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon" className="lg:hidden">
|
|
<Menu className="h-4 w-4" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="p-0">
|
|
<SheetHeader className="sr-only">
|
|
<SheetTitle>{title}</SheetTitle>
|
|
<SheetDescription>{description}</SheetDescription>
|
|
</SheetHeader>
|
|
<DashboardSidebar
|
|
items={items}
|
|
iconSrc={sidebarIconSrc}
|
|
brandHref={sidebarBrandHref}
|
|
brandHoverLabel={sidebarBrandHoverLabel}
|
|
top={sidebarTop}
|
|
footerItems={sidebarFooterItems}
|
|
footer={sidebarFooter}
|
|
/>
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
|
{Icon ? (
|
|
<div className="hidden rounded-nested border border-border/70 bg-muted/50 p-2 text-muted-foreground sm:flex">
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
) : null}
|
|
<div className="min-w-0">
|
|
<p className="truncate text-lg font-semibold text-foreground">{title}</p>
|
|
<p className="truncate text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{headerActions ? (
|
|
<div className="flex items-center gap-2">{headerActions}</div>
|
|
) : null}
|
|
</header>
|
|
|
|
<main className="flex-1 p-4 lg:p-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|