Classic Navbar

"use client";

// A full-width bar for any site: a hairline appears under it once the page
// scrolls, it steps out of the way while you scroll down and returns as soon
// as you scroll up, and an underline slides to the current page. On small
// screens the menu is a full-screen sheet that wipes down from under the bar,
// with large links rising in one after another. 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. */