Morph Nav

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13  type ReactNode,
14  type RefObject,
15} from 'react'
16import { createPortal } from 'react-dom'
17import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
18import { cn } from '@/lib/utils'
19import { springs } from '@/lib/motion-tokens'
20import { useProximityHighlight, ProximityHighlight } from '@/lib/hooks/use-proximity-highlight'
21 
22export interface MorphNavItem {
23  id: string
24  label: string
25  icon?: ReactNode
26  href?: string
27  onSelect?: () => void
28  children?: MorphNavItem[]
29}
30 
31type MorphNavState = 'closed' | 'main' | 'sub'
32 
33interface MorphNavContextValue {
34  state: MorphNavState
35  setState: (s: MorphNavState) => void
36  items: MorphNavItem[]
37  activeSubId: string | null
38  setActiveSubId: (id: string | null) => void
39  onNavigate?: (href: string, item: MorphNavItem) => void
40}
41 
42const MorphNavContext = createContext<MorphNavContextValue | null>(null)
43 
44function useMorphNavCtx(componentName: string) {
45  const ctx = useContext(MorphNavContext)
46  if (!ctx) throw new Error(`${componentName} must be used within MorphNav`)
47  return ctx
48}
49 
50const PATH_HAMBURGER = 'M3 5h10M3 8h10M3 11h10'
51const PATH_MINUS = 'M3 8h10'
52const PATH_BACK = 'M7 5L3 8l4 3'
53 
54function getTriggerPaths(state: MorphNavState) {
55  if (state === 'closed') return { top: PATH_HAMBURGER, mid: PATH_HAMBURGER, bot: PATH_HAMBURGER }
56  if (state === 'main') return { top: PATH_MINUS, mid: PATH_MINUS, bot: PATH_MINUS }
57  return { top: PATH_BACK, mid: PATH_BACK, bot: PATH_BACK }
58}
59 
60export interface MorphNavProps {
61  children?: ReactNode
62  items: MorphNavItem[]
63  placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start'
64  onNavigate?: (href: string, item: MorphNavItem) => void
65  onOpenChange?: (open: boolean) => void
66  triggerLabel?: string
67  className?: string
68  panelClassName?: string
69}
70 
71export const MorphNav = forwardRef<HTMLDivElement, MorphNavProps>(
72  (
73    {
74      items,
75      placement = 'bottom-end',
76      onNavigate,
77      onOpenChange,
78      triggerLabel = 'Menu',
79      className,
80      panelClassName,
81    },
82    ref,
83  ) => {
84    const [state, setState] = useState<MorphNavState>('closed')
85    const [activeSubId, setActiveSubId] = useState<string | null>(null)
86    const triggerRef = useRef<HTMLButtonElement>(null)
87    const panelRef = useRef<HTMLDivElement>(null)
88    const reduceMotion = useReducedMotion()
89 
90    const reactId = useId()
91// … truncated