Anatomie

Le composant possède trois zones visuelles. En haut, un header d'article pleine largeur affiche le tag de catégorie, le titre, l'auteur, la date et le temps de lecture avec des icônes Lucide. En dessous, une grille CSS divise la vue en une colonne nav sticky de 220px et une colonne de contenu fluide. La nav liste les titres de sections en boutons avec une bordure gauche commune ; l'item actif reçoit un surlignage de bordure gauche colorée. Chaque section de contenu est une motion.div avec son propre fade-in décalé et un hook onViewportEnter.

Comment ça marche

Le mécanisme de scroll-spy évite le boilerplate IntersectionObserver en déléguant au tracking de viewport de Framer Motion. Chaque section de contenu est encapsulée dans une motion.div avec onViewportEnter={() => setActiveId(s.id)} et une marge viewport de -80px. Quand plus de 80px d'une section entrent dans la zone visible, setActiveId se déclenche et la mise à jour du state re-rend le sommaire avec le nouveau surlignage actif. Un clic sur un bouton du sommaire appelle aussi setActiveId directement, gardant la navigation clavier en phase avec la position du scroll.

Comment le coder en React

1. Définir la structure de données et initialiser le state

   Crée une interface Section avec id, title et content. Accepte un tableau sections en prop et initialise activeId avec useState, en prenant l'ID de la première section par défaut. Ce seul morceau de state pilote à la fois le surlignage du sommaire et la logique de scroll-spy.

   const [activeId, setActiveId] = useState(sections[0]?.id ?? "");

2. Construire la nav sidebar sticky

   Rends une motion.nav avec position:sticky et top:2rem. Parcours les sections pour produire un bouton par entrée. Pilote la couleur de la bordure gauche et le font-weight depuis activeId, les items actifs reçoivent --color-accent et le poids 600, les inactifs --color-foreground-muted et le poids 400. Applique une transition CSS sur color et border-color pour un changement fluide.

   borderLeftColor: activeId === s.id ? "var(--color-accent)" : "transparent",
   fontWeight: activeId === s.id ? 600 : 400,

3. Attacher onViewportEnter aux sections de contenu

   Encapsule chaque section d'article dans une motion.div et passe onViewportEnter={() => setActiveId(s.id)}. Règle la marge du viewport à -80px pour que le surlignage se déclenche légèrement avant que le haut de la section n'atteigne le bord supérieur de l'écran. Décale le fade-in initial avec delay: i * 0.05 pour un effet en cascade au premier chargement.

   <motion.div
     onViewportEnter={() => setActiveId(s.id)}
     viewport={{ once: true, margin: "-80px" }}
     initial={{ opacity: 0, y: 16 }}
     whileInView={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.5, delay: i * 0.05, ease: EASE }}
   >

4. Connecter la navigation au clic et gérer le layout responsive

   Le onClick de chaque bouton du sommaire appelle setActiveId directement pour que les utilisateurs clavier et souris restent synchronisés sans événements de scroll. Sur mobile, replie la sidebar dans un accordéon en haut de page ou un drawer, la colonne sticky de 220px est trop étroite pour les petits écrans et doit être masquée sous un breakpoint avec une media query CSS ou un préfixe responsive Tailwind.

Quand l'utiliser

Utilise ce layout pour les contenus longs où les lecteurs ont besoin de repères : documentation technique, tutoriels approfondis, études de cas, ou articles éditoriaux avec quatre sections nommées ou plus. À éviter pour les courts billets (moins de trois sections) où la sidebar ajoute du bruit visuel sans valeur de navigation, et pour les landing pages marketing où une sidebar CTA sticky surpasse un sommaire.

Utilisé par

• Stripe Docs, Sommaire sticky côté droit avec surlignage de la section active sur toutes les pages de référence API et de guides.
• MDN Web Docs, Sommaire sidebar persistant qui suit la position au scroll et marque le titre courant pour les longs articles techniques.
• Vercel Docs, Layout deux colonnes avec un sommaire flottant qui surligne les sections au scroll dans tous ses guides de déploiement.

FAQ