refactor: consolidate admin authorization into layout and introduce AdminShell component

2026-06-30 22:56:25 +07:00
parent 848f93641f
commit e2f480af62
12 changed files with 444 additions and 99 deletions
@@ -0,0 +1,89 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarHeader,
+  SidebarInset,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
+
+export function AdminShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <SidebarProvider>
+      <div className="flex w-full min-h-screen bg-background text-foreground">
+        <Sidebar variant="sidebar" collapsible="icon">
+          <SidebarHeader className="border-b border-border py-4 px-4">
+            <span className="font-bold tracking-wider text-primary text-sm uppercase">
+              Admin
+            </span>
+          </SidebarHeader>
+
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={pathname === "/admin"}
+                    >
+                      <Link href="/admin">
+                        <LayoutDashboard className="w-4 h-4" />
+                        <span>Dashboard</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={pathname === "/admin/form"}
+                    >
+                      <Link href="/admin/form">
+                        <ClipboardList className="w-4 h-4" />
+                        <span>Form</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={pathname.startsWith("/admin/backend")}
+                    >
+                      <Link href="/admin/backend">
+                        <Server className="w-4 h-4" />
+                        <span>Backend</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+
+        <SidebarInset>
+          <div className="md:hidden p-2">
+            <SidebarTrigger />
+          </div>
+          {children}
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  );
+}