Bounce Sidebar

1'use client'
2 
3import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from 'react'
4import {
5  motion,
6  stagger,
7  useAnimate,
8  useMotionValue,
9  useReducedMotion,
10  type Transition,
11  type Variants,
12} from 'motion/react'
13import { cn } from '@/lib/utils'
14import { playHoverSound, playClickSound, playBounceSound } from '@/lib/sound'
15 
16const EASE_OUT = [0.22, 1, 0.36, 1] as const
17 
18export type BounceSidebarProps = {
19  items: string[]
20  value?: number
21  defaultValue?: number
22  onChange?: (index: number) => void
23  dotColor?: string
24  className?: string
25}
26 
27const itemClass = (active: boolean) =>
28  cn(
29    'flex w-full cursor-pointer items-center rounded-lg p-1 text-left text-base',
30    'transition-colors duration-150',
31    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 focus-visible:ring-offset-(--color-bg)',
32    active ? 'text-foreground' : 'text-foreground/55',
33  )
34 
35export function BounceSidebar({
36  items,
37  value,
38  defaultValue = 0,
39  onChange,
40  dotColor = 'var(--color-accent)',
41  className,
42}: BounceSidebarProps) {
43  const [internalValue, setInternalValue] = useState(defaultValue)
44  const activeIndex = value ?? internalValue
45 
46  const [scope, animate] = useAnimate()
47  const itemRefs = useRef<(HTMLLIElement | null)[]>([])
48  const prevY = useRef<number | null>(null)
49 
50  const reduceMotion = useReducedMotion()
51 
52  const dotX = useMotionValue(0)
53  const dotY = useMotionValue(0)
54 
55  const [dotSize, setDotSize] = useState(6)
56 
57  const getTargetY = (index: number, size: number): number | null => {
58    const el = itemRefs.current[index]
59    if (!el) return null
60    const dpr = window.devicePixelRatio || 1
61    return Math.round((el.offsetTop + el.offsetHeight / 2 - size / 2) * dpr) / dpr
62  }
63 
64  useEffect(() => {
65    let cancelled = false
66    const dpr = window.devicePixelRatio || 1
67    const computedSize = Math.round(6 * dpr) / dpr
68 
69    const initialIndex = activeIndex
70    const snap = () => {
71      if (cancelled) return
72      const toY = getTargetY(initialIndex, computedSize)
73      if (toY === null) return
74      dotX.set(0)
75      dotY.set(toY)
76      prevY.current = toY
77    }
78 
79    const ro = new ResizeObserver(snap)
80    itemRefs.current.forEach((el) => el && ro.observe(el))
81    setDotSize(computedSize)
82 
83    const raf = requestAnimationFrame(snap)
84    document.fonts?.ready.then(snap)
85    return () => {
86      cancelled = true
87      cancelAnimationFrame(raf)
88      ro.disconnect()
89    }
90// … truncated