Nav Menu

1'use client'
2 
3import {
4  cloneElement,
5  createContext,
6  forwardRef,
7  isValidElement,
8  useCallback,
9  useContext,
10  useEffect,
11  useMemo,
12  useRef,
13  type HTMLAttributes,
14  type ReactNode,
15} from 'react'
16import { Slot } from '@radix-ui/react-slot'
17import { motion, useMotionValue, useReducedMotion, useSpring, type MotionValue } from 'motion/react'
18import { cn } from '@/lib/utils'
19import { springs } from '@/lib/motion-tokens'
20import {
21  useProximityHighlight,
22  ProximityHighlight,
23  type ItemRect,
24} from '@/lib/hooks/use-proximity-highlight'
25import { WeightShiftText } from '@/components/ui/weight-shift-text'
26 
27interface NavMenuContextValue {
28  activeSlug: string | null
29  nextIndex: () => number
30  registerItem: (index: number, el: HTMLElement | null) => void
31}
32 
33const NavMenuContext = createContext<NavMenuContextValue | null>(null)
34 
35function useNavMenuCtx(componentName: string) {
36  const ctx = useContext(NavMenuContext)
37  if (!ctx) throw new Error(`${componentName} must be used within NavMenu`)
38  return ctx
39}
40 
41interface NavMenuContentContextValue {
42  activeIndex: number | null
43  setActiveIndex: (i: number | null) => void
44  highlightX: ReturnType<typeof import('motion/react').useSpring>
45  highlightSize: MotionValue<number>
46  highlightOpacity: ReturnType<typeof import('motion/react').useSpring>
47  axis: 'x' | 'y'
48  registerItem: (index: number, el: HTMLElement | null) => void
49}
50 
51const NavMenuContentContext = createContext<NavMenuContentContextValue | null>(null)
52 
53function useNavMenuContentCtx(componentName: string) {
54  const ctx = useContext(NavMenuContentContext)
55  if (!ctx) throw new Error(`${componentName} must be used within NavMenuContent`)
56  return ctx
57}
58 
59export interface NavMenuProps extends HTMLAttributes<HTMLElement> {
60  children: ReactNode
61  activeSlug: string | null
62  'aria-label'?: string
63}
64 
65export const NavMenu = forwardRef<HTMLElement, NavMenuProps>(
66  ({ children, activeSlug, 'aria-label': ariaLabel = 'Main', className, ...props }, ref) => {
67    const navRef = useRef<HTMLElement>(null)
68    const activeItemRectRef = useRef<ItemRect | null>(null)
69 
70    const {
71      activeIndex,
72      setActiveIndex,
73      registerItem,
74      handlers,
75      highlightX,
76      highlightSize,
77      highlightOpacity,
78      axis,
79    } = useProximityHighlight(navRef, { axis: 'y' })
80 
81    const indexRef = useRef(0)
82    const nextIndex = useCallback(() => {
83      const idx = indexRef.current
84      indexRef.current += 1
85      return idx
86    }, [])
87 
88// … truncated