Tray Navbar

"use client";

// A navbar whose links sit together in an inset tray, with a raised pill that
// slides to the current page, like a segmented control. Calm and compact; it
// reads well on busy pages. On small screens a card unfolds from the menu
// button with the same tray stood upright, its pill sliding up and down.
// Links sit left, centred or right; zero, one or two CTAs.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useId, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];

const SPRING = { type: "spring", duration: 0.35, bounce: 0 } as const;

const FOCUS =
  "outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-background";

export type NavLink = { label: string; href?: string };

export type NavbarProps = {
  /** Text beside the mark. */
  brand?: string;