Scroll Progress Navbar

"use client";

import * as React from "react";
import { motion, useMotionValueEvent, useReducedMotion, useScroll, useSpring } from "motion/react";

export interface NavbarLink {
  label: string;
  href: string;
  /** Marks the current page (aria-current="page"). */
  active?: boolean;
}

export interface ScrollProgressNavbarProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
  /** Logo or wordmark on the left. */
  brand?: React.ReactNode;
  /** Primary navigation links. They collapse into a menu on narrow containers. */
  links?: NavbarLink[];
  /** Slot on the right, e.g. a call-to-action button. */
  action?: React.ReactNode;
  /** Scrollable element to track. Defaults to the window. */
  container?: React.RefObject<HTMLElement | null>;
  /** Scroll distance in px after which the bar turns compact. */
  threshold?: number;
  /** Stick to the top of the scrolling area. */
  sticky?: boolean;
  /** Show the reading progress bar. */
  showProgress?: boolean;
  /** Where the progress bar sits. */
  progressPosition?: "top" | "bottom";
  /** Spring-smooth the progress bar. */
  smooth?: boolean;
  /** Progress bar, active link and focus ring colour. */
  accent?: string;
  /** Accessible name of the navigation landmark. */
  label?: string;
}

/**
 * A header that tightens and gains a surface once you scroll past a threshold, with a reading
 * progress bar. Works with the window or any scrollable container.
 */
export function ScrollProgressNavbar({
  brand,
  links = [],
  action,
  container,
  threshold = 48,
  sticky = true,
  showProgress = true,
  progressPosition = "bottom",
  smooth = true,
  accent = "#FF7448",
  label = "Main",
  className = "",
  style,
  ...props
}: ScrollProgressNavbarProps) {
  const reduceMotion = useReducedMotion();
  const headerRef = React.useRef<HTMLElement>(null);
  const progressRef = React.useRef<HTMLDivElement>(null);
  const menuId = React.useId();
  const [menuOpen, setMenuOpen] = React.useState(false);

  const { scrollY, scrollYProgress } = useScroll({ container });
  const smoothed = useSpring(scrollYProgress, { stiffness: 260, damping: 40, mass: 0.3, restDelta: 0.001 });
  const progress = smooth && !reduceMotion ? smoothed : scrollYProgress;

  // Compact state and progress value are written to the DOM directly — no re-render while scrolling.
  const syncCompact = (y: number) => headerRef.current?.setAttribute("data-compact", String(y > threshold));
  const syncProgress = (p: number) => progressRef.current?.setAttribute("aria-valuenow", String(Math.round(p * 100)));
  useMotionValueEvent(scrollY, "change", syncCompact);
  useMotionValueEvent(scrollYProgress, "change", syncProgress);

  // Initial sync (e.g. the page was restored mid-scroll) and when the threshold changes.
  React.useEffect(() => {
    headerRef.current?.setAttribute("data-compact", String(scrollY.get() > threshold));
    progressRef.current?.setAttribute("aria-valuenow", String(Math.round(scrollYProgress.get() * 100)));
  }, [threshold, scrollY, scrollYProgress]);

  const renderLinks = (orientation: "row" | "column") =>
    links.map((link) => (
      <li key={link.href + link.label}>
        <a
          href={link.href}
          aria-current={link.active ? "page" : undefined}
          onClick={() => setMenuOpen(false)}
          className={`group/link relative flex items-center rounded-md text-sm tracking-tight text-zinc-600 transition-colors hover:text-zinc-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--spn-accent)] aria-[current=page]:text-zinc-950 dark:text-zinc-400 dark:hover:text-white dark:aria-[current=page]:text-white ${
            orientation === "row" ? "h-8 px-3" : "h-10 px-1"
          }`}
        >
          {link.label}
          {orientation === "row" && (
            <span
              aria-hidden="true"
              className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-[var(--spn-accent)] opacity-0 transition-opacity group-aria-[current=page]/link:opacity-100"
            />
          )}
        </a>
      </li>
    ));

  return (
    <header
      ref={headerRef}
      data-compact="false"
      className={`group/nav @container z-40 w-full ${sticky ? "sticky top-0" : "relative"} ${className}`}
      style={{ ["--spn-accent" as string]: accent, ...style }}
      {...props}
    >
      <div className="relative border-b border-transparent transition-[background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none group-data-[compact=true]/nav:border-zinc-900/10 group-data-[compact=true]/nav:bg-white/85 group-data-[compact=true]/nav:shadow-[0_8px_24px_-18px_rgba(0,0,0,0.35)] group-data-[compact=true]/nav:backdrop-blur-md dark:group-data-[compact=true]/nav:border-white/10 dark:group-data-[compact=true]/nav:bg-zinc-950/80">
        <div className="flex h-16 items-center gap-6 px-6 transition-[height,padding] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none group-data-[compact=true]/nav:h-12 group-data-[compact=true]/nav:px-4">
          {brand && <div className="flex shrink-0 items-center">{brand}</div>}

          {links.length > 0 && (
            <nav aria-label={label} className="hidden @[36rem]:block">
              <ul className="flex items-center gap-1">{renderLinks("row")}</ul>
            </nav>
          )}

          <div className="ml-auto flex items-center gap-2">
            {action}
            {links.length > 0 && (
              <button
                type="button"
                aria-expanded={menuOpen}
                aria-controls={menuId}
                aria-label={menuOpen ? "Close menu" : "Open menu"}
                onClick={() => setMenuOpen((open) => !open)}
                className="group/menu flex h-8 w-8 items-center justify-center rounded-md border border-zinc-900/10 text-zinc-700 transition-colors hover:text-zinc-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--spn-accent)] @[36rem]:hidden dark:border-white/10 dark:text-zinc-300 dark:hover:text-white"
              >
                <span aria-hidden="true" className="relative block h-2.5 w-3.5">
                  <span className="absolute left-0 top-0 h-px w-full bg-current transition-all duration-200 group-aria-expanded/menu:top-1/2 group-aria-expanded/menu:rotate-45" />
                  <span className="absolute bottom-0 left-0 h-px w-full bg-current transition-all duration-200 group-aria-expanded/menu:bottom-auto group-aria-expanded/menu:top-1/2 group-aria-expanded/menu:-rotate-45" />
                </span>
              </button>
            )}
          </div>
        </div>

        {links.length > 0 && (
          <nav
            id={menuId}
            aria-label={label}
            hidden={!menuOpen}
            className="border-t border-zinc-900/10 bg-white px-6 py-2 @[36rem]:hidden dark:border-white/10 dark:bg-zinc-950"
          >
            <ul className="flex flex-col">{renderLinks("column")}</ul>
          </nav>
        )}

        {showProgress && (
          <div
            ref={progressRef}
            role="progressbar"
            aria-label="Reading progress"
            aria-valuemin={0}
            aria-valuemax={100}
            className={`pointer-events-none absolute inset-x-0 h-[2px] overflow-hidden ${
              progressPosition === "top" ? "top-0" : "-bottom-px"
            }`}
          >
            <motion.div className="h-full w-full origin-left bg-[var(--spn-accent)]" style={{ scaleX: progress }} />
          </div>
        )}
      </div>
    </header>
  );
}