Длинный документ, например условия использования, с оглавлением сбоку, которое прилипает к верху и всегда остаётся на виду. Раздел, который сейчас в поле зрения, подсвечивается, а тонкий маркер на линии пружинисто переезжает к нему.
Клик по пункту оглавления сразу прокручивает текст к нужному разделу. На узких экранах оглавление скрывается, и остаётся только текст.
Скопируйте эти файлы в components/side-scroll-nav/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { SideScrollNav } from "@/components/side-scroll-nav/side-scroll-nav";
export function Terms() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-screen overflow-y-auto">
<SideScrollNav
scrollContainerRef={scrollRef}
title="Политика конфиденциальности"
terms={[
{ id: "data", title: "Какие данные мы собираем", content: <p>Только необходимые.</p> },
{ id: "cookies", title: "Файлы cookie", content: <p>Для работы сайта.</p> },
]}
/>
</div>
);
}title?Заголовок страницы
Тип string·По умолчанию "Условия использования"
terms?Разделы { id, title, content }
Тип SideScrollTerm[]·По умолчанию девять разделов условий
scrollContainerRef?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
contentOpacity?Непрозрачность текста разделов от 0 до 1, по умолчанию 0.35
Тип number
markerColor?Цвет маркера, по умолчанию цвет темы
Тип string
stiffness?Жёсткость пружины маркера
Тип number·По умолчанию 400
className?Классы корневого блока
Тип string