feature admin dashboard layout: add top navigation bar using shadcn navigation menu components

Author: asiansnoodle

src/app/admin/layout.tsx

@@ -1,14 +1,22 @@
 import React from "react";
+import AdminNavbar from "@/components/AdminNavbar";
 
 export default function AdminLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <section className="min-h-screen flex bg-neutral-50 text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
-      {/* Navbar will go here soon */}
-      <div className="flex-1 p-6">{children}</div>
+    <section className="min-h-screen flex flex-col bg-neutral-50 text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
+      {/* Top nav bar */}
+      <AdminNavbar />
+
+      {/* Page content */}
+      <main className="flex-1 p-6">
+        {children}
+      </main>
+
+      {/* Footer */}
     </section>
   );
 }

src/components/AdminNavbar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+
+const today = new Date().toLocaleDateString(undefined, {
+  weekday: "short",
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+const AdminNavbar = () => {
+  return (
+    <header className="border-b border-neutral-200 bg-white/80 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/60">
+      <div className="mx-auto flex h-14 w-full max-w-7xl items-center px-3 sm:px-4 lg:px-5">
+        
+        {/* Left side: logo */}
+        <div className="mr-6 flex flex-col leading-tight">
+          <span className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+            Admin Panel
+          </span>
+          <span className="text-[11px] text-neutral-500 dark:text-neutral-400">
+            ACM @ UTSA
+          </span>
+        </div>
+
+        {/* Center: nav menu links */}
+        <nav aria-label="Admin navigation" className="flex-1">
+          <NavigationMenu>
+            <NavigationMenuList className="flex-wrap">
+
+              {/* Dashboard */}
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                  <Link href="/admin">Dashboard</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+
+              {/* Courses */}
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                  <Link href="/admin/courses">Courses</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+
+              {/* Tags */}
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                  <Link href="/admin/tags">Tags</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+
+              {/* Users */}
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                  <Link href="/admin/users">Users</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+
+            </NavigationMenuList>
+          </NavigationMenu>
+        </nav>
+
+        {/* Right side: date */}
+        <div className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+            {today}
+        </div>
+
+      </div>
+    </header>
+  );
+};
+
+export default AdminNavbar;