54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { m } from "motion/react";
|
|
import { ThemeToggle } from "@/components/ui/ThemeToggle";
|
|
|
|
const navLinks = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Posts", href: "/posts/" },
|
|
];
|
|
|
|
export function Header() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<m.nav
|
|
aria-label="Primary navigation"
|
|
initial={{ opacity: 0, y: -12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
className="sticky top-0 z-50 bg-canvas/80 backdrop-blur-sm border-b border-border"
|
|
>
|
|
<div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<Link href="/" className="heading-sm text-ink hover:text-accent transition-colors">
|
|
Krishna
|
|
</Link>
|
|
<div className="flex items-center gap-8">
|
|
{navLinks.map((link) => {
|
|
const isActive =
|
|
link.href === "/"
|
|
? pathname === "/"
|
|
: pathname === link.href.slice(0, -1) || pathname.startsWith(link.href);
|
|
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={`font-medium text-sm transition-colors ${
|
|
isActive ? "text-ink" : "text-ink-soft hover:text-ink"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</m.nav>
|
|
);
|
|
}
|