Resizable Header

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useMotionValueEvent,
7  useReducedMotion,
8  useScroll,
9} from "framer-motion";
10import * as React from "react";
11 
12export type HeaderLink = {
13  label: string;
14  href: string;
15};
16 
17export type ResizableHeaderProps = Omit<
18  React.HTMLAttributes<HTMLElement>,
19  "onChange"
20> & {
21  /** Brand mark shown on the left. */
22  logo?: React.ReactNode;
23  /** Primary navigation links. */
24  links?: HeaderLink[];
25  /** Value matching a link `href` to mark active. */
26  activeHref?: string;
27  /** Call-to-action node shown on the right. */
28  cta?: React.ReactNode;
29  /** Scroll distance (px) before the bar morphs into a floating pill. */
30  scrollThreshold?: number;
31  /** Stick the header to the top of the viewport. */
32  sticky?: boolean;
33  /** Scroll container to track. Defaults to the window. */
34  scrollRef?: React.RefObject<HTMLElement | null>;
35  /** Called when a link is clicked, with its href. */
36  onNavigate?: (href: string) => void;
37};
38 
39let headerSeed = 0;
40 
41const ResizableHeader = React.forwardRef<HTMLElement, ResizableHeaderProps>(
42  (
43    {
44      logo,
45      links = [],
46      activeHref,
47      cta,
48      scrollThreshold = 24,
49      sticky = true,
50      scrollRef,
51      onNavigate,
52      className,
53      ...props
54    },
55    ref,
56  ) => {
57    const reduceMotion = useReducedMotion();
58    const ids = React.useMemo(() => {
59      const n = headerSeed++;
60      return { pill: `header-pill-${n}` };
61    }, []);
62    const { scrollY } = useScroll(
63      scrollRef ? { container: scrollRef } : undefined,
64    );
65    const [shrunk, setShrunk] = React.useState(false);
66    const [hovered, setHovered] = React.useState<string | null>(null);
67    const [open, setOpen] = React.useState(false);
68 
69    useMotionValueEvent(scrollY, "change", (latest) => {
70      setShrunk(latest > scrollThreshold);
71    });
72 
73    const spring = reduceMotion
74      ? { duration: 0 }
75      : ({ type: "spring", stiffness: 320, damping: 32, mass: 0.9 } as const);
76 
77    const select = (href: string) => {
78      onNavigate?.(href);
79      setOpen(false);
80    };
81 
82    return (
83      <header
84        ref={ref}
85        className={`${sticky ? "sticky top-0" : "relative"} z-sticky flex w-full max-w-full justify-center overflow-x-clip px-4 ${className ?? ""}`}
86        {...props}
87      >
88        <motion.nav
89          layout
90          transition={spring}
91          aria-label="Main"
92// … truncated