Proximity Sidebar

1"use client"
2 
3import React, {
4  useCallback,
5  useEffect,
6  useMemo,
7  useRef,
8  useState,
9} from "react"
10import {
11  motion,
12  useMotionValue,
13  useReducedMotion,
14  useSpring,
15  useTransform,
16  type MotionValue,
17} from "motion/react"
18 
19type Side = "left" | "right"
20type SectionKind = "title" | "subtitle" | "section" | "body"
21type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6
22 
23export type ProximitySection = {
24  id: string
25  label: string
26  kind?: SectionKind
27  level?: SectionLevel
28}
29 
30type DashPreset = {
31  base: number
32  bump: number
33  thickness: number
34  className: string
35}
36 
37type DashProps = {
38  active: boolean
39  mouseY: MotionValue<number>
40  onSelect: (id: string) => void
41  registerDash: (id: string, node: HTMLButtonElement | null) => void
42  section: ProximitySection
43  sectionKind: SectionKind
44  side: Side
45}
46 
47type ProximitySidebarProps = {
48  activeOffset?: number
49  className?: string
50  sections: ProximitySection[]
51  side?: Side
52}
53 
54const RADIUS = 40
55const MAX_DASH_WIDTH = 110
56const SCROLL_IDLE_RESET_DELAY = 80
57 
58const DASH_PRESETS: Record<SectionKind, DashPreset> = {
59  title: {
60    base: 40,
61    bump: 70,
62    thickness: 1,
63    className: "bg-foreground",
64  },
65  subtitle: {
66    base: 36,
67    bump: 64,
68    thickness: 1,
69    className: "bg-foreground",
70  },
71  section: {
72    base: 30,
73    bump: 56,
74    thickness: 1,
75    className: "bg-muted-foreground/40",
76  },
77  body: {
78    base: 24,
79    bump: 50,
80    thickness: 1,
81    className: "bg-muted-foreground/40",
82  },
83}
84 
85const getSectionElement = (id: string) =>
86  typeof document === "undefined" ? null : document.getElementById(id)
87 
88const getSectionKind = (section: ProximitySection): SectionKind => {
89  if (section.kind) return section.kind
90  if (section.level === 1) return "title"
91  if (section.level === 2) return "subtitle"
92  if (section.level === 3) return "section"
93  return "body"
94}
95 
96const getElementSectionKind = (id: string): SectionKind | undefined => {
97  const heading = getSectionElement(id)?.querySelector("h1, h2, h3, h4, h5, h6")
98  const tagName = heading?.tagName.toLowerCase()
99 
100  if (tagName === "h1") return "title"
101  if (tagName === "h2") return "subtitle"
102  if (tagName === "h3") return "section"
103  if (tagName) return "body"
104}
105 
106const getScrollParent = (element: HTMLElement) => {
107  let parent = element.parentElement
108 
109  while (parent) {
110    const { overflowY } = window.getComputedStyle(parent)
111 
112    if (/(auto|scroll|overlay)/.test(overflowY)) {
113      return parent
114    }
115 
116    parent = parent.parentElement
117  }
118 
119// … truncated