74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navItems = [
|
|
{
|
|
href: "/",
|
|
label: "Home",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth={active ? 0 : 2} className="w-6 h-6">
|
|
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
{!active && <polyline points="9 22 9 12 15 12 15 22" />}
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/genre",
|
|
label: "Genres",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth={active ? 0 : 2} className="w-6 h-6">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/search",
|
|
label: "Search",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.5 : 2} className="w-6 h-6">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
// Hide bottom nav on chapter reader for immersive reading
|
|
if (pathname.match(/^\/manga\/[^/]+\/\d+$/)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-xl shadow-[0_-1px_3px_rgba(0,0,0,0.08)] sm:hidden pb-safe">
|
|
<div className="flex items-center justify-around h-14">
|
|
{navItems.map((item) => {
|
|
const isActive =
|
|
item.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex flex-col items-center gap-0.5 px-5 py-1.5 transition-colors ${
|
|
isActive ? "text-accent" : "text-muted"
|
|
}`}
|
|
>
|
|
{item.icon(isActive)}
|
|
<span className="text-[10px] font-semibold">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|