Auto-Hide Header

"use client";

import * as React from "react";
import { animate, motion, useMotionValue, useMotionValueEvent, useScroll } from "motion/react";

function subscribeReducedMotion(callback: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", callback);
  return () => mq.removeEventListener("change", callback);
}

/** SSR-safe: hydrates as "no preference", then follows the media query. */
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

export interface AutoHideHeaderSpring {
  stiffness: number;
  damping: number;
  mass: number;
}

export interface AutoHideHeaderProps
  extends Omit<React.HTMLAttributes<HTMLElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> {
  children?: React.ReactNode;
  /** Scrollable element to track. Defaults to the window. */
  container?: React.RefObject<HTMLElement | null>;
  /** Pixels scrolled in one direction before the header hides or reappears. */
  tolerance?: number;
  /** The header is always shown while the scroll position is within this many px of the top. */
  offset?: number;
  /** Spring for the slide. */
  spring?: AutoHideHeaderSpring;
  /** Gain a surface, hairline border and shadow once the page is scrolled. */
  elevate?: boolean;
  /** Keep the header visible regardless of scroll direction. */
  pinned?: boolean;
  /** Called when the header hides (false) or reappears (true). */
  onVisibilityChange?: (visible: boolean) => void;
}

/**
 * A sticky header that slides away while you scroll down and returns as soon as you scroll up.
 * Scroll is read from motion values and the slide is a spring on a motion value, so scrolling
 * never re-renders React. It stays visible near the top, while pinned, and whenever focus is
 * inside it, so keyboard users can always reach it. With prefers-reduced-motion it still hides
 * and shows, but instantly, without sliding.
 */
export function AutoHideHeader({
  children,
  container,
  tolerance = 8,
  offset = 64,
  spring = { stiffness: 500, damping: 42, mass: 0.8 },
  elevate = true,
  pinned = false,
  onVisibilityChange,
  className = "",
  style,
  onFocus,
  onBlur,
  ...props
}: AutoHideHeaderProps) {
  const reduceMotion = usePrefersReducedMotion();
  const headerRef = React.useRef<HTMLElement>(null);
  const y = useMotionValue(0);
  const { scrollY } = useScroll({ container });

  /** Scroll bookkeeping lives in a ref: none of it is rendered. */
  const track = React.useRef({ hidden: false, lastY: 0, travel: 0, focusWithin: false });

  const setHidden = (hidden: boolean) => {
    const t = track.current;
    const header = headerRef.current;
    if (!header || t.hidden === hidden) return;
    t.hidden = hidden;
    header.setAttribute("data-state", hidden ? "hidden" : "visible");
    // Travel a little past the header's height so its shadow leaves too.
    const target = hidden ? -(header.offsetHeight + 16) : 0;
    if (reduceMotion) {
      y.stop();
      y.set(target);
    } else {
      animate(y, target, { type: "spring", ...spring });
    }
    onVisibilityChange?.(!hidden);
  };

  const maxScroll = () => {
    const el = container?.current;
    if (el) return el.scrollHeight - el.clientHeight;
    return document.documentElement.scrollHeight - window.innerHeight;
  };

  const onScroll = (latest: number) => {
    const header = headerRef.current;
    if (!header) return;
    const t = track.current;
    // Ignore elastic overscroll above the top and below the bottom.
    const current = Math.min(Math.max(latest, 0), Math.max(maxScroll(), 0));
    const delta = current - t.lastY;
    t.lastY = current;
    header.setAttribute("data-elevated", String(elevate && current > 1));

    if (pinned || t.focusWithin || current <= offset) {
      t.travel = 0;
      setHidden(false);
      return;
    }
    if (delta === 0) return;
    // Accumulate travel in one direction; a direction change starts counting again.
    t.travel = Math.sign(delta) === Math.sign(t.travel) ? t.travel + delta : delta;
    if (t.travel > tolerance) setHidden(true);
    else if (t.travel < -tolerance) setHidden(false);
  };

  useMotionValueEvent(scrollY, "change", onScroll);

  // Initial sync (restored scroll position) and whenever the rules change.
  const sync = React.useEffectEvent(() => {
    const t = track.current;
    t.lastY = scrollY.get();
    headerRef.current?.setAttribute("data-elevated", String(elevate && t.lastY > 1));
    if (pinned || t.lastY <= offset) setHidden(false);
  });
  React.useEffect(() => {
    sync();
  }, [pinned, offset, elevate]);

  return (
    <motion.header
      ref={headerRef}
      data-state="visible"
      data-elevated="false"
      {...props}
      onFocus={(event) => {
        onFocus?.(event);
        // Keyboard users never lose the header: focusing anything inside reveals it.
        track.current.focusWithin = true;
        setHidden(false);
      }}
      onBlur={(event) => {
        onBlur?.(event);
        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) track.current.focusWithin = false;
      }}
      style={{ ...style, y }}
      className={`group/ahh sticky top-0 z-40 w-full border-b transition-[background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none ${
        elevate
          ? "border-transparent data-[elevated=true]:border-zinc-900/10 data-[elevated=true]:bg-white/85 data-[elevated=true]:shadow-[0_10px_30px_-20px_rgba(0,0,0,0.45)] data-[elevated=true]:backdrop-blur-md dark:data-[elevated=true]:border-white/10 dark:data-[elevated=true]:bg-zinc-950/80"
          : "border-zinc-900/10 bg-white dark:border-white/10 dark:bg-zinc-950"
      } ${className}`}
    >
      {children}
    </motion.header>
  );
}