b604a828a1
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>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|