Ajoute le sommaire en version mobile
Contexte
Suite à la discussion dans l'issue gitlab, je voulais activer le sommaire en version mobile qui était masqué jusqu'alors.
Le problème était que nous importions dans notre projet les styles css du DSFR mais pas la partie JS qui est nécessaire au bon fonctionnement du "menu latéral" en vue mobile.
Contenu
Il y a beaucoup de changements, en particulier parce que pour embarquer le JS du DSFR dans un projet react / next, la recommendation est de passer par la librairie @codegouvfr/react-dsfr qui propose une integration à next et un ensemble de composants react prédéfinis.
Intégration de la librairie
Je me suis basé sur la doc officielle, avec quelques ajustements mineurs nécessaires pour faire fonctionner en parallèle à Sentry.
Un point important est que le @codegouvfr/react-dsfr gère automatiquement le mode d'affichage entre "light" et "dark" mode. D'une part parce que notre contenu est destiné à du print, et d'autre part parce que nous n'avons pour le moment pas pensé le site en version "dark mode", nous devons "forcer" l'utilisation du light mode pour le moment.
Je n'ai pas trouvé de façon "officielle" de faire ça je fais donc un simple document.querySelector("html").setAttribute("data-fr-scheme", "light"); au plus tôt dans le cycle de vie de l'appli. C'est ce qui est recommandé par le DSFR.
Migration du header / footer
Jusqu'à présent nous avions implémenté "manuellement" des composants Header / Footer, et suite à l'intégration de @codegouvfr/react-dsfr certaines erreurs étaient soulevées (notamment parce que le markup du header n'était pas conforme).
J'en ai profité pour migrer vers les composants Header / Footer de @codegouvfr/react-dsfr.
Il y a de très légères différences visuelles mais je pense que nous sommes maintenant plus proches du design officiel.
Exemple du rendu
On peut noter que le sommaire n'est pas sticky en mobile. C'est voulu car c'est ainsi que le composant du DSFR fonctionne, et je ne voulais pas trop le "tordre", j'aurais eu besoin de faire pas mal de workarounds assez moches pour obtenir quelque chose de potable.