From b604a828a1ae44fb18b4c9db679be1ae6fadc98c Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Wed, 13 May 2026 21:54:29 +0200
Subject: [PATCH] feat(nav): voeg AppNav.tsx toe als sticky client-component
 met active-link state

Implementeert de globale top-navbar met 8 NAV_ITEMS (Dashboard + 7 modules),
actieve-link-detectie via usePathname, en Tailwind sticky/backdrop-blur styling.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/AppNav.tsx | 48 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/AppNav.tsx

diff --git a/components/AppNav.tsx b/components/AppNav.tsx
new file mode 100644
index 0000000..6d848b5
--- /dev/null
+++ b/components/AppNav.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+const NAV_ITEMS = [
+  { href: '/', label: 'Dashboard' },
+  { href: '/docker', label: 'Docker' },
+  { href: '/git', label: 'Git' },
+  { href: '/systemd', label: 'systemd' },
+  { href: '/caddy', label: 'Caddy' },
+  { href: '/flows', label: 'Flows' },
+  { href: '/audit', label: 'Audit' },
+  { href: '/settings', label: 'Settings' },
+]
+
+export default function AppNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="sticky top-0 z-10 border-b border-border bg-background/95 backdrop-blur">
+      <div className="mx-auto max-w-6xl px-6 py-3 flex items-center gap-6">
+        <Link href="/" className="mr-2 text-sm font-semibold tracking-tight shrink-0">
+          Ops Dashboard
+        </Link>
+        {NAV_ITEMS.map((item) => {
+          const isActive =
+            item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'text-sm transition-colors',
+                isActive
+                  ? 'text-foreground font-medium'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+            >
+              {item.label}
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}