"use client";
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { HexMark } from "@/components/honeycomb";
export interface LegalTocItem {
id: string;
label: string;
}
/**
* Inhaltsverzeichnis der Rechtsseiten. Breit: klebt neben dem Text und
* markiert den Abschnitt, in dem man gerade liest — das Sechseck gleitet
* mit (die eine bewusste Bewegung der Seite). Schmal: aufklappbar ueber dem
* Text, damit er nicht erst nach einer langen Linkliste beginnt.
*/
export function LegalToc({ items, label }: { items: LegalTocItem[]; label: string }) {
const [activeId, setActiveId] = useState(items[0]?.id ?? "");
const reduceMotion = useReducedMotion();
useEffect(() => {
const targets = items.map((item) => document.getElementById(item.id)).filter((el): el is HTMLElement => el !== null);
// Das Band liegt im oberen Drittel: aktiv ist der Abschnitt, dessen
// Ueberschrift man gerade liest, nicht der, der unten hereinragt.
const observer = new IntersectionObserver(
(entries) => {
const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
if (visible[0]) setActiveId(visible[0].target.id);
},
{ rootMargin: "-15% 0px -70% 0px" }
);
targets.forEach((el) => observer.observe(el));
return () => observer.disconnect();
}, [items]);
const links = (onDesktop: boolean) => (
{items.map((item) => {
const isActive = onDesktop && item.id === activeId;
return (