"use client";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { NAV_ITEMS, isNavItemActive, type NavItem } from "@/components/layout/nav-items";
import { cn } from "@/lib/utils";
/**
* Floating bottom navigation — icons only.
*
* FlixTV's only persistent chrome. Identity, search and the account menu live in
* the top header (`site-header.tsx`), so this bar is purely a row of
* destinations and nothing is duplicated between the two.
*
* Shape: a shrink-to-fit pill centred above the bottom edge of the viewport at
* every breakpoint, with a heavy glass surface (translucent base +
* `backdrop-blur-2xl` + hairline border + deep drop shadow) so the artwork behind
* it stays visible through the bar.
*
* Icons only. With no text the bar is roughly a third of the width it was, so
* seven cells sit comfortably on a 360px phone. The full name is never rendered
* as visible text — it is the `aria-label`, the `title` (which browsers show as a
* native tooltip) and the CSS tooltip on hover/focus. The active destination is a
* white pill with a dark icon, which is self-styling and therefore correct during
* SSR rather than needing a measurement that would shift the bar on hydration.
*/
export function FloatingNav() {
const pathname = usePathname();
// Read for the active-state match only: "Trending" is a view of `/search`, so
// it can only be the active item when that exact query is on screen.
const search = useSearchParams().toString();
return (
);
}
/**
* One destination: icon, and a tooltip that is invisible until hover or focus.
*/
function NavLink({ item, active }: { item: NavItem; active: boolean }) {
const Icon = item.icon;
return (
{/*
Hover / focus tooltip. `aria-hidden` because the accessible name is
already the link's `aria-label`; announcing it twice would be noise.
`invisible` + `opacity-0` keeps it out of the tab order and out of the
accessibility tree, and the group hover/focus variants reveal it.
*/}
{item.label}
);
}