'use client';
import { Activity, Boxes, Home, MoreHorizontal, Search } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Sheet } from '@/components/ui/sheet';
import { cn } from '@/lib/cn';
import { moreGroups, routes } from '@/lib/site';
import { useOpenSearch } from './search-context';
const ICONS = { '/': Home, '/models': Boxes, '/changes': Activity } as const;
/**
* Bottom tab bar (< lg): Home · Models · Changes · Search · More. "More" opens a bottom sheet with the full site grouped
* (Explore / Intelligence / Temporal / About). Safe-area aware; reserves `pb-[calc(var(--tabbar-h)+safe-area)]`.
*/
export function MobileTabBar() {
const pathname = usePathname();
const openSearch = useOpenSearch();
const [more, setMore] = useState(false);
useEffect(() => setMore(false), [pathname]);
const isActive = (href: string) => (href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/'));
const cls = (active: boolean) => cn('flex h-full w-full flex-col items-center justify-center gap-0.5 text-[10.5px]', active ? 'text-accent' : 'text-ink-2');
const tabs = [
{ href: '/', label: 'Home' },
{ href: '/models', label: 'Models' },
{ href: '/changes', label: 'Changes' },
] as const;
return (
<>
setMore(false)} side="bottom" eyebrow="AI Atlas" title="Everything on the site" id="mobile-more" className="lg:hidden">
{moreGroups.map((g) => (
{g.label}
{g.items.map((n) => (
-
{n.label}
))}
))}
All entity types with live counts →
);
}