106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* SiteBottomNav — mobile-only bottom tab bar.
|
|
*
|
|
* Four items: Home (Feed) · Knowledgebase · Search · Account.
|
|
* Mirrors the Instagram pattern — fixed to the viewport bottom, full
|
|
* width, equal-width tabs, the active tab uses the primary color.
|
|
*
|
|
* Hidden on md+ — desktop uses SiteSidebar.
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Home, Search, User as UserIcon } from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Item = {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
matchPrefixes?: string[];
|
|
};
|
|
|
|
export function SiteBottomNav() {
|
|
const pathname = usePathname();
|
|
const { user } = useAuth();
|
|
|
|
const items: Item[] = [
|
|
{ href: "/", label: "Home", icon: <Home className="size-5" /> },
|
|
{
|
|
href: "/search",
|
|
label: "Search",
|
|
icon: <Search className="size-5" />,
|
|
// Search is the knowledgebase entry point too — keep the tab lit
|
|
// while the user is reading anywhere in the library.
|
|
matchPrefixes: [
|
|
"/search",
|
|
"/books",
|
|
"/letters",
|
|
"/transcriptions",
|
|
"/essays",
|
|
"/glossary",
|
|
"/journals",
|
|
"/magazines",
|
|
"/other-documents",
|
|
"/disciples",
|
|
],
|
|
},
|
|
{
|
|
href: user ? "/u/me" : "/login",
|
|
label: user ? "You" : "Sign in",
|
|
icon: <UserIcon className="size-5" />,
|
|
matchPrefixes: ["/u/me", "/login", "/signup"],
|
|
},
|
|
];
|
|
|
|
function isActive(item: Item): boolean {
|
|
if (item.matchPrefixes) {
|
|
return item.matchPrefixes.some((p) =>
|
|
p === "/" ? pathname === "/" : pathname.startsWith(p),
|
|
);
|
|
}
|
|
if (item.href === "/") return pathname === "/";
|
|
return pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Primary"
|
|
className={cn(
|
|
"md:hidden fixed inset-x-0 bottom-0 z-40",
|
|
"bg-background/95 backdrop-blur border-t border-border",
|
|
"pb-[env(safe-area-inset-bottom)]",
|
|
)}
|
|
>
|
|
<ul className="flex items-stretch">
|
|
{items.map((item) => {
|
|
const active = isActive(item);
|
|
return (
|
|
<li key={item.href} className="flex-1">
|
|
<Link
|
|
href={item.href}
|
|
aria-label={item.label}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"h-14 flex flex-col items-center justify-center gap-0.5",
|
|
active
|
|
? "text-primary"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{item.icon}
|
|
<span className="text-[0.65rem] font-medium">
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|