Rail Nav

1'use client'
2 
3import * as React from 'react'
4import { useControllableState } from '@radix-ui/react-use-controllable-state'
5import { motion, useReducedMotion } from 'motion/react'
6 
7import { cn } from '@/lib/utils'
8 
9export type RailNavItem = {
10  label: React.ReactNode
11  href: string
12  /** Optional selector to observe when it differs from href. */
13  target?: string
14  className?: string
15  onClick?: React.MouseEventHandler<HTMLAnchorElement>
16}
17 
18/** @deprecated Use RailNavItem instead. */
19export type RailNavItems = RailNavItem
20 
21export type RailNavProps = Omit<React.ComponentProps<'aside'>, 'defaultValue'> & {
22  items: readonly RailNavItem[]
23  value?: string
24  defaultValue?: string
25  onValueChange?: (value: string) => void
26  expanded?: boolean
27  defaultExpanded?: boolean
28  onExpandedChange?: (expanded: boolean) => void
29  trackActive?: boolean
30  observerOptions?: IntersectionObserverInit
31  preventNavigation?: boolean
32  label?: string
33}
34 
35export function RailNav({
36  items,
37  value: valueProp,
38  defaultValue,
39  onValueChange,
40  expanded: expandedProp,
41  defaultExpanded = false,
42  onExpandedChange,
43  trackActive = true,
44  observerOptions,
45  preventNavigation = false,
46  label = 'On this page',
47  className,
48  onMouseEnter,
49  onMouseLeave,
50  onFocusCapture,
51  onBlurCapture,
52  ...props
53}: RailNavProps) {
54  const shouldReduceMotion = useReducedMotion()
55  const [activeValue = '', setActiveValue] = useControllableState({
56    prop: valueProp,
57    defaultProp: defaultValue ?? items[0]?.href ?? '',
58    onChange: onValueChange,
59  })
60 
61  const [expanded = false, setExpanded] = useControllableState({
62    prop: expandedProp,
63    defaultProp: defaultExpanded,
64    onChange: onExpandedChange,
65  })
66 
67  const [hoveredValue, setHoveredValue] = React.useState<string | null>(null)
68 
69  React.useEffect(() => {
70    if (!trackActive || typeof IntersectionObserver === 'undefined') {
71      return
72    }
73 
74    const observedItems = items.flatMap((item) => {
75      const selector = item.target ?? (item.href.startsWith('#') ? item.href : null)
76 
77      if (!selector) {
78        return []
79      }
80 
81      try {
82        const element = document.querySelector(selector)
83 
84        return element
85          ? [
86              {
87                element,
88                value: item.href,
89              },
90            ]
91          : []
92      } catch {
93        return []
94      }
95    })
96 
97    if (!observedItems.length) {
98      return
99    }
100 
101// … truncated