Glass Nav

1'use client';
2 
3import { useEffect, useId, useRef, useState } from 'react';
4import { cn } from '@/lib/utils';
5 
6interface GlassNavProps {
7  brand: React.ReactNode;
8  links: { label: string; href: string }[];
9  activeHref?: string;
10  cta?: { label: string; href: string };
11  children?: React.ReactNode;
12  className?: string;
13}
14 
15export function GlassNav({ brand, links, activeHref, cta, children, className }: GlassNavProps) {
16  const headerRef = useRef<HTMLElement>(null);
17  const pillRef = useRef<HTMLSpanElement>(null);
18  const [open, setOpen] = useState(false);
19  const panelId = useId();
20 
21  useEffect(() => {
22    const hdr = headerRef.current;
23    if (!hdr) return;
24    const sync = () => hdr.toggleAttribute('data-scrolled', window.scrollY > 24);
25    window.addEventListener('scroll', sync, { passive: true });
26    sync();
27    return () => window.removeEventListener('scroll', sync);
28  }, []);
29 
30  const handleItemEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
31    const el = e.currentTarget;
32    const pill = pillRef.current;
33    if (!pill) return;
34    pill.style.width = `${el.offsetWidth}px`;
35    pill.style.height = `${el.offsetHeight}px`;
36    pill.style.transform = `translate(${el.offsetLeft}px, ${el.offsetTop}px)`;
37    pill.style.opacity = '1';
38  };
39 
40  const handleNavLeave = () => {
41    if (pillRef.current) pillRef.current.style.opacity = '0';
42  };
43 
44  const activeClass = 'bg-ruri font-medium text-white dark:bg-ruri-soft dark:text-deep';
45  const inactiveClass = 'text-muted-foreground hover:text-foreground';
46 
47  return (
48    <header
49      ref={headerRef}
50      className={cn('group sticky top-4 z-30 mt-4', className)}
51      style={{ viewTransitionName: 'site-nav' }}
52    >
53      {/* Scroll-edge masked backdrop-blur band */}
54      <div
55        className="pointer-events-none absolute inset-x-0 -top-4 -z-10 h-[calc(100%+2.5rem)] backdrop-blur-md [mask-image:linear-gradient(to_bottom,black_45%,transparent)]"
56        aria-hidden="true"
57      />
58 
59      {/* Glass pill */}
60      <div className="veil-grain grid grid-cols-[1fr_auto] items-center rounded-full lg:grid-cols-[1fr_auto_1fr] border border-glass-edge bg-glass-strong px-5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.70),inset_0_-1px_0_rgba(28,25,20,0.05),0_8px_32px_rgba(28,25,20,0.08)] backdrop-blur-2xl backdrop-saturate-150 transition-colors duration-300 group-data-[scrolled]:bg-glass-stronger sm:px-6 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.10),inset_0_-1px_0_rgba(0,0,0,0.35),0_8px_32px_rgba(0,0,0,0.35)]">
61// … truncated