Refactor root admin dashboard UI

2026-03-07 17:36:45 +01:00
parent ead75769ef
commit 8606f6e315
25 changed files with 2345 additions and 685 deletions
@@ -0,0 +1,81 @@
+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[];
+  sidebarFooter?: ReactNode;
+  headerActions?: ReactNode;
+  children: ReactNode;
+};
+
+export function DashboardLayout({
+  title,
+  description,
+  icon: Icon,
+  items,
+  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:block">
+          <DashboardSidebar items={items} 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} footer={sidebarFooter} />
+              </SheetContent>
+            </Sheet>
+
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              {Icon ? (
+                <div className="hidden rounded-lg 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>
+  );
+}