"use client"; import * as motion from "motion/react-client"; import { AnimatePresence } from "motion/react"; import { Menu, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { useNavbar } from "@/hooks/use-navbar"; export type NavLink = { label: string; href: string; }; export type NavbarProps = { /** Left-side brand — your logo, name, or any node. */ brand?: React.ReactNode; links?: NavLink[]; /** Right-side extras shown on desktop (e.g. a theme toggle). */ actions?: React.ReactNode; className?: string; /** Heading shown at the top of the mobile panel. Defaults to "menu". */ menuLabel?: string; }; /** * Fixed top navigation. Desktop shows inline links; below `md` it collapses to a * hamburger that opens a right-side slide-in panel. Routes are caller-supplied — * plain , framework-agnostic. Behavior lives in the headless useNavbar hook. */ export function Navbar({ brand, links = [], actions, className, menuLabel = "menu", }: NavbarProps) { const { open, setOpen, panelRef } = useNavbar(); const linkClass = "text-sm text-white underline-offset-4 hover:underline whitespace-nowrap"; return (

{!open && ( )}

{open && ( <>

{menuLabel}

)}

); }

navbar.