100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
ActivityIcon,
|
|
ClipboardCheckIcon,
|
|
InfoIcon,
|
|
LayoutDashboardIcon,
|
|
} from "lucide-react";
|
|
import type { AuthState } from "@/lib/auth/session";
|
|
import { AccountMenu } from "@/components/navigation/account-menu";
|
|
import { ThemeMenu } from "@/components/navigation/theme-menu";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const primaryNavItems = [
|
|
{
|
|
href: "/",
|
|
label: "About",
|
|
icon: InfoIcon,
|
|
},
|
|
{
|
|
href: "/dashboard",
|
|
label: "Dashboard",
|
|
icon: LayoutDashboardIcon,
|
|
},
|
|
{
|
|
href: "/planning",
|
|
label: "Planning",
|
|
icon: ActivityIcon,
|
|
},
|
|
{
|
|
href: "/check-in",
|
|
label: "Check-in",
|
|
icon: ClipboardCheckIcon,
|
|
},
|
|
] as const;
|
|
|
|
type TopNavProps = {
|
|
authState: AuthState;
|
|
};
|
|
|
|
function isActivePath(pathname: string, href: string) {
|
|
if (href === "/") {
|
|
return pathname === "/";
|
|
}
|
|
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
export function TopNav({ authState }: TopNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<header className="sticky top-4 z-40">
|
|
<div className="flex flex-wrap items-center gap-4 rounded-[var(--radius-4xl)] border border-border/70 bg-card/86 px-5 py-4 shadow-[var(--shadow-2)] backdrop-blur">
|
|
<Link href="/" className="shrink-0">
|
|
<span className="block text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
|
|
Inspannings Monitor
|
|
</span>
|
|
<span className="mt-1 block text-base font-semibold tracking-[-0.02em] text-foreground">
|
|
Wellness-first dagflow
|
|
</span>
|
|
</Link>
|
|
|
|
<nav
|
|
aria-label="Hoofdnavigatie"
|
|
className="flex flex-1 flex-wrap items-center gap-2 md:ml-6"
|
|
>
|
|
{primaryNavItems.map((item) => {
|
|
const isActive = pathname ? isActivePath(pathname, item.href) : false;
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={cn(
|
|
"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-primary !text-white shadow-[var(--shadow-1)] [&_svg]:!text-white"
|
|
: "text-muted-foreground hover:bg-secondary hover:text-foreground",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="ml-auto flex flex-wrap items-center gap-2">
|
|
<ThemeMenu />
|
|
<AccountMenu authState={authState} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|