From 012ad64a0df835815145b890aeb1017bc343350c Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Mon, 27 Apr 2026 21:02:28 +0800
Subject: [PATCH] feat: add admin layout with sidebar, auth guard, and navbar
 link

- Admin layout with server-side auth guard (redirects non-admins)
- Reusable sidebar component with active state detection
- Navbar profile dropdown shows admin link for admin users
- Admin routes are noindexed (robots: false)
- /admin redirects to /admin/users
---
 app/(admin)/admin/page.tsx         |  5 ++++
 app/(admin)/layout.tsx             | 44 ++++++++++++++++++++++++++++++
 components/admin/admin-sidebar.tsx | 40 +++++++++++++++++++++++++++
 components/navbar.tsx              | 24 ++++++++++++++++
 lib/routes.ts                      | 18 ++++++++++++
 5 files changed, 131 insertions(+)
 create mode 100644 app/(admin)/admin/page.tsx
 create mode 100644 app/(admin)/layout.tsx
 create mode 100644 components/admin/admin-sidebar.tsx

diff --git a/app/(admin)/admin/page.tsx b/app/(admin)/admin/page.tsx
new file mode 100644
index 0000000..cbb15d0
--- /dev/null
+++ b/app/(admin)/admin/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function AdminPage() {
+  redirect("/admin/users")
+}
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
new file mode 100644
index 0000000..14e9756
--- /dev/null
+++ b/app/(admin)/layout.tsx
@@ -0,0 +1,44 @@
+import { redirect } from "next/navigation"
+import { headers } from "next/headers"
+import { auth } from "@/lib/auth"
+import { AdminSidebar } from "@/components/admin/admin-sidebar"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: { template: "%s | Admin — DeckyVault", default: "Admin — DeckyVault" },
+  robots: { index: false, follow: false },
+}
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  })
+
+  if (!session || session.user.role !== "admin") {
+    redirect("/")
+  }
+
+  return (
+    <section className="w-full flex flex-col gap-8 pb-16">
+      <div className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-2xl sm:text-3xl font-bold">Admin</h1>
+          <p className="text-sm text-text/60 mt-1">
+            Manage users, hardware, and games
+          </p>
+        </div>
+      </div>
+
+      <div className="px-4 md:px-[10svw]">
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-6">
+          <AdminSidebar />
+          <div className="flex-1 min-w-0">{children}</div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/admin/admin-sidebar.tsx b/components/admin/admin-sidebar.tsx
new file mode 100644
index 0000000..dd837ae
--- /dev/null
+++ b/components/admin/admin-sidebar.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { UsersIcon, CpuIcon, Gamepad2Icon } from "lucide-react"
+
+const adminNavItems = [
+  { href: "/admin/users", label: "Users", icon: UsersIcon },
+  { href: "/admin/hardware", label: "Hardware", icon: CpuIcon },
+  { href: "/admin/games", label: "Games", icon: Gamepad2Icon },
+]
+
+export function AdminSidebar() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="md:w-48 shrink-0">
+      <div className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0 md:border-r md:border-border">
+        {adminNavItems.map((item) => {
+          const isActive =
+            pathname === item.href || pathname.startsWith(item.href + "/")
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap rounded-lg md:rounded-none md:border-l-2 md:border-r-0 md:border-transparent ${
+                isActive
+                  ? "bg-primary/10 text-primary md:border-l-primary"
+                  : "text-text/50 hover:text-text/70 hover:bg-text/5"
+              }`}
+            >
+              <item.icon className="h-4 w-4 shrink-0" />
+              {item.label}
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index de5fd93..00fa1d7 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -11,6 +11,7 @@ import {
     Gamepad2Icon,
     LogOut,
     MenuIcon,
+    ShieldIcon,
     User,
     XIcon,
 } from "lucide-react"
@@ -302,6 +303,19 @@ export default function Navbar() {
                                                         {route.title}
                                                     </Link>
                                                 ))}
+                                                {session.user.role === "admin" && (
+                                                    <>
+                                                        <div className='my-1 border-t border-white/10' />
+                                                        <Link
+                                                            href="/admin"
+                                                            onClick={() => setUserMenuOpen(false)}
+                                                            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-primary/80 hover:text-primary hover:bg-primary/5 transition-colors cursor-pointer"
+                                                        >
+                                                            <ShieldIcon className="h-4 w-4" />
+                                                            Admin
+                                                        </Link>
+                                                    </>
+                                                )}
                                                 <div className='my-1 border-t border-white/10' />
                                                 <button
                                                     onClick={async () => {
@@ -419,6 +433,16 @@ export default function Navbar() {
                                                 {route.title}
                                             </Link>
                                         ))}
+                                        {session.user.role === "admin" && (
+                                            <Link
+                                                href="/admin"
+                                                onClick={() => setMobileMenuOpen(false)}
+                                                className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-primary/80 hover:text-primary hover:bg-primary/5 transition-colors cursor-pointer"
+                                            >
+                                                <ShieldIcon className="h-4 w-4" />
+                                                Admin
+                                            </Link>
+                                        )}
                                         <button
                                             onClick={async () => {
                                                 setMobileMenuOpen(false)
diff --git a/lib/routes.ts b/lib/routes.ts
index 5fe9f98..24a26e7 100644
--- a/lib/routes.ts
+++ b/lib/routes.ts
@@ -39,4 +39,22 @@ export const authRoutes = [
         href: "/profile?tab=saved",
         icon: "Bookmark",
     },
+]
+
+export const adminRoutes = [
+    {
+        title: "Users",
+        href: "/admin/users",
+        icon: "Users",
+    },
+    {
+        title: "Hardware",
+        href: "/admin/hardware",
+        icon: "Cpu",
+    },
+    {
+        title: "Games",
+        href: "/admin/games",
+        icon: "Gamepad2",
+    },
 ]
\ No newline at end of file