96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { ListIcon } from "lucide-react"
|
|
import type { UpdateHeading } from "@/lib/updates"
|
|
|
|
export function ChapterNav({
|
|
headings,
|
|
}: {
|
|
headings: UpdateHeading[]
|
|
}) {
|
|
const [activeId, setActiveId] = useState<string>(headings[0]?.id ?? "")
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const observers: IntersectionObserver[] = []
|
|
|
|
headings.forEach((heading) => {
|
|
const element = document.getElementById(heading.id)
|
|
if (!element) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveId(heading.id)
|
|
}
|
|
})
|
|
},
|
|
{
|
|
rootMargin: "-20% 0px -70% 0px",
|
|
},
|
|
)
|
|
observer.observe(element)
|
|
observers.push(observer)
|
|
})
|
|
|
|
return () => {
|
|
observers.forEach((observer) => observer.disconnect())
|
|
}
|
|
}, [headings])
|
|
|
|
if (headings.length === 0) return null
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile toggle button */}
|
|
<button
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
className="fixed bottom-4 right-4 z-50 md:hidden flex items-center justify-center w-10 h-10 rounded-full bg-background border border-border shadow-lg hover:border-border-active transition-colors cursor-pointer"
|
|
aria-label="Toggle chapter navigation"
|
|
>
|
|
<ListIcon className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* Mobile dropdown */}
|
|
{mobileOpen && (
|
|
<div
|
|
className="fixed inset-0 z-45 md:hidden"
|
|
onClick={() => setMobileOpen(false)}
|
|
/>
|
|
)}
|
|
<nav
|
|
className={`fixed bottom-16 right-4 z-50 md:z-auto md:static md:block max-h-[50vh] md:max-h-none overflow-y-auto bg-background border border-border rounded-lg p-3 shadow-lg md:shadow-none md:rounded-none md:border-0 md:p-0 md:bg-transparent transition-all md:transition-none ${
|
|
mobileOpen
|
|
? "block opacity-100"
|
|
: "hidden md:block opacity-0 md:opacity-100"
|
|
}`}
|
|
>
|
|
<h4 className="text-xs uppercase text-text/40 font-semibold mb-2 hidden md:block">
|
|
Chapters
|
|
</h4>
|
|
<ul className="flex flex-col gap-1">
|
|
{headings.map((heading) => (
|
|
<li key={heading.id}>
|
|
<a
|
|
href={`#${heading.id}`}
|
|
onClick={() => setMobileOpen(false)}
|
|
className={`block text-sm py-1 transition-colors ${
|
|
heading.level === 3 ? "pl-3" : ""
|
|
} ${
|
|
activeId === heading.id
|
|
? "text-primary font-medium"
|
|
: "text-text/60 hover:text-text"
|
|
}`}
|
|
>
|
|
{heading.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|