135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* SiteBottomNav — mobile-only bottom tab bar.
|
|
*
|
|
* Four items: Home · Search · Kautilya · 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 Image from "next/image";
|
|
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 { KautilyaIcon } from "@/components/selection-toolbar/shared";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Item = {
|
|
/** Tab label, used for the aria-label. Bottom nav is icon-only. */
|
|
label: string;
|
|
href: 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: "/ask",
|
|
label: "Kautilya",
|
|
icon: <KautilyaIcon className="size-5" />,
|
|
},
|
|
{
|
|
href: user ? "/u/me" : "/login",
|
|
label: user ? "You" : "Sign in",
|
|
// Show the user's uploaded avatar when available so the nav
|
|
// feels personalized. Falls back to the generic person glyph
|
|
// for anonymous viewers and signed-in users who haven't
|
|
// uploaded a picture yet. The avatar circle is slightly larger
|
|
// (size-6 vs the size-5 icons elsewhere) so it reads as an
|
|
// identifying glyph rather than fading in with the other tabs.
|
|
icon: user?.avatar_url ? (
|
|
<Image
|
|
src={user.avatar_url}
|
|
alt=""
|
|
width={28}
|
|
height={28}
|
|
className="size-7 rounded-full object-cover ring-1 ring-foreground/10"
|
|
unoptimized
|
|
/>
|
|
) : (
|
|
<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 justify-around py-2">
|
|
{items.map((item) => {
|
|
const active = isActive(item);
|
|
return (
|
|
<li
|
|
key={item.label}
|
|
// flex + items-center + justify-center so the fixed-size
|
|
// pill below sits centred inside its equal-width cell;
|
|
// without these the pill collapses to the left edge of
|
|
// each `flex-1` slot.
|
|
className="flex-1 flex items-center justify-center"
|
|
>
|
|
<Link
|
|
href={item.href}
|
|
aria-label={item.label}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"w-12 h-12 rounded-md flex flex-col items-center justify-center",
|
|
active
|
|
? "text-white bg-primary"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|