70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { SearchBar } from "./SearchBar";
|
|
|
|
const navLinks = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/genre", label: "Genres" },
|
|
];
|
|
|
|
export function Header() {
|
|
const pathname = usePathname();
|
|
|
|
// Hide header on chapter reader for immersive reading
|
|
if (pathname.match(/^\/manga\/[^/]+\/\d+$/)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 bg-background/95 backdrop-blur-xl shadow-sm">
|
|
{/* Top row: logo + search */}
|
|
<div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-3">
|
|
<Link href="/" className="flex items-center gap-2.5 shrink-0">
|
|
<div className="w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
className="w-5 h-5 text-white"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
>
|
|
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-lg font-extrabold tracking-tight">
|
|
SunnyMH
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop nav links */}
|
|
<nav className="hidden sm:flex items-center gap-1 ml-4">
|
|
{navLinks.map((link) => {
|
|
const isActive =
|
|
link.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(link.href);
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
|
|
isActive
|
|
? "text-accent bg-accent/10"
|
|
: "text-muted hover:text-foreground hover:bg-surface"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex-1" />
|
|
<SearchBar />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|