Navigation

Sommaire

الفهرسTable of contents

Stablesrc/dsm/components/table-of-contents.tsx
Le sommaire liste les sections d'une page longue. La section lue reçoit un repère de couleur sur la piste de gauche, soit passé en prop (`activeId`), soit calculé automatiquement au défilement (`observe`).

Import

import { TableOfContents } from "@/dsm/components/table-of-contents";

Exemples

Sommaire simple

Section active passée explicitement via `activeId`.

LTR

Deux niveaux

Sections et sous-sections, avec indentation du second niveau.

LTR

Suivi automatique du défilement

Faites défiler l'article : le repère suit la section lue grâce à `observe`.

LTR

Présentation

L'Assurance Maladie Obligatoire couvre les frais de soins de santé des assurés et de leurs ayants droit.

Conditions

Toute personne exerçant une activité professionnelle déclarée peut y adhérer, ainsi que les membres de sa famille à charge.

Documents

Carte nationale d'identité électronique, attestation de travail ou registre de commerce, et un relevé d'identité bancaire.

Remboursement

Les demandes de remboursement se déposent en ligne sur damancom.ma, dans un délai de 6 mois suivant les soins.

Usage

Quand l'utiliser

  • Utilisez le sommaire sur un article, une fiche institution ou une page réglementaire de plusieurs écrans.
  • Activez `observe` pour suivre automatiquement la lecture ; sinon pilotez `activeId` vous-même.
  • Réservez le niveau 2 (`level: 2`) aux sous-sections, pour garder une hiérarchie lisible d'un coup d'œil.

Quand ne pas l'utiliser

  • N'affichez pas de sommaire pour une page courte tenant sur un seul écran : il n'apporterait aucun repère utile.

Accessibilité & langues

Accessibilité

  • Le conteneur est un `nav` avec `aria-label` (le titre du sommaire, ou « Sommaire » par défaut).
  • Chaque lien pointe vers l'ancre `#id` de sa section ; la section active porte `aria-current="location"`.

RTL & multilingue

  • La piste et le repère actif sont posés en `border-s` : ils restent du côté « début » de la ligne, à droite en arabe.

Propriétés

TableOfContents
PropriétéTypeDéfautDescription
titleReactNode—Titre affiché au-dessus du sommaire et utilisé comme `aria-label` s'il s'agit d'une chaîne.
items*{ id: string; label: string; level?: 1 | 2 }[]—Sections de la page, dans l'ordre d'apparition.
activeIdstring—Identifiant de la section active (mode contrôlé).
observebooleanfalseCalcule la section active via `IntersectionObserver` en fonction du défilement.
stickybooleanfalseFixe le sommaire sous l'en-tête pendant le défilement.
classNamestring—Classes Tailwind supplémentaires.

Composants liés