Компоненты

SectionNav

Липкая навигация по разделам длинной страницы.

Липкая навигация по разделам длинной страницы: клик прокручивает к блоку, активный пункт подсвечивается по мере чтения.

Пример

tsx

import { SectionNav } from "@toimetdev/pathlogs-core";

<SectionNav
  aria-label="Разделы задачи"
  sections={[
    { id: "overview", label: "Обзор" },
    { id: "checklist", label: "Чек-лист", count: 7 },
    { id: "comments", label: "Комментарии", count: 12 },
    { id: "history", label: "История" },
  ]}
/>

{/* дальше на странице */}
<section id="overview">…</section>
<section id="checklist">…</section>

Разделы находятся по id, поэтому от самой страницы ничего, кроме проставленных идентификаторов, не требуется.

Поведение

Отступ прокрутки берётся у самой панели: её top из CSS плюс высота. Панель липнет под шапкой на узком экране и к верху окна на широком — жёсткое число промахнулось бы в одном из случаев.
Ряд разделов листается протяжкой на узком экране, и клик при этом продолжает работать: протяжка включается только после порога сдвига.
Плавность отключается при prefers-reduced-motion.

Пропсы

Проп	Тип	По умолчанию	Описание
`sections`*	`{ id: string; label: string; count?: number }[]`	—	Разделы в порядке их следования на странице. count рисуется бейджем справа.
`aria-label`	`string`	—	Доступное имя навигации: «Разделы задачи».
`className`	`string`	—	Дополнительные классы контейнера.

sections*{ id: string; label: string; count?: number }[]

Разделы в порядке их следования на странице. count рисуется бейджем справа.

aria-labelstring

Доступное имя навигации: «Разделы задачи».

classNamestring

Дополнительные классы контейнера.