Morph Navbar

1"use client";
2 
3import * as React from "react";
4 
5import Link from "next/link";
6 
7import { motion } from "motion/react";
8 
9import { cn } from "@/lib/utils";
10 
11interface NavbarContextValue {
12  registerItem: (href: string, el: HTMLDivElement | null) => void;
13  previewItem: (el: HTMLDivElement) => void;
14  clearPreview: () => void;
15  activeHref: string;
16}
17 
18export const MorphNavbarContext =
19  React.createContext<NavbarContextValue | null>(null);
20 
21export function MorphNavbar({
22  children,
23  activeHref,
24}: {
25  children: React.ReactNode;
26  activeHref: string;
27}) {
28  const containerRef = React.useRef<HTMLDivElement>(null);
29 
30  // Registry of nav items by href
31  const itemRegistry = React.useRef<Record<string, HTMLDivElement | null>>({});
32 
33  const lastActivePosition = React.useRef<{
34    left: string;
35    width: string;
36  } | null>(null);
37 
38  const [activePill, setActivePill] = React.useState({
39    left: "4px",
40    width: "0px",
41  });
42 
43  const [hoverPill, setHoverPill] = React.useState({
44    left: "4px",
45    width: "calc(100% - 8px)",
46  });
47 
48  function measureItem(el: HTMLDivElement) {
49    if (!containerRef.current) return null;
50 
51    const itemRect = el.getBoundingClientRect();
52    const containerRect = containerRef.current.getBoundingClientRect();
53 
54    return {
55      left: `${itemRect.left - containerRect.left}px`,
56      width: `${itemRect.width}px`,
57    };
58  }
59 
60  function updateActivePill(next: { left: string; width: string }) {
61    // Avoid unnecessary state updates (prevents render loops)
62    if (
63      lastActivePosition.current &&
64      lastActivePosition.current.left === next.left &&
65      lastActivePosition.current.width === next.width
66    ) {
67      return;
68    }
69 
70    lastActivePosition.current = next;
71    setActivePill(next);
72  }
73 
74  const contextValue: NavbarContextValue = {
75    registerItem(href, el) {
76      itemRegistry.current[href] = el;
77 
78      // Only position the active pill for the active route
79      if (!el || href !== activeHref) return;
80 
81      const pos = measureItem(el);
82      if (pos) updateActivePill(pos);
83    },
84 
85    previewItem(el) {
86      const pos = measureItem(el);
87      if (pos) setHoverPill(pos);
88    },
89 
90    clearPreview() {
91      setHoverPill({
92        left: "4px",
93        width: "calc(100% - 8px)",
94      });
95    },
96 
97    activeHref,
98  };
99 
100  return (
101    <MorphNavbarContext.Provider value={contextValue}>
102      <nav
103        aria-label="Main Navigation"
104// … truncated