Barre de nav verticale
Le besoin
Objectif
(description synthétique de l'objectif, préciser éventuellement ce qui est hors scope)
- Créer la première version de la barre de navigation verticale qui permet de passer d'un constat à l'autre pour le diag
- Cette barre aura autant de pastille que de constats affichés
- le constat actif au départ sera le numéro 1
- les animations présentes (dans le MVP) comme décrites dans Comportement attendu
- le clic changera la pastille active et renverra au lien interne du constat
Hors scope
- dans une seconde version, la couleur de fond pourra alterner entre vert et le beige. Quand le fond est vert, la pastille devient beige, sera implémenté plus tard
Résultats attendus
(livrables et comment on teste)
- tests à spécifier
Les spécifications:
Maquettes
(lien vers les maquettes + infos complémentaires)
-
Design Desktop -
Design Mobile: absente en mobile
Comportement attendu
- la navigation a autant de pastilles que de constat
- le constat actif est en vert
Les animations sont les suivantes:
- Au survol de l'une des pastilles, les titres des chapitres apparaissent, le titre du constat actif est en vert. La pastille survolée devient orange ainsi que le titre
- Le menu reste visible tant que l'utilisateur.rice est sur la div du menu
- Au survol d'un titre ou d'une pastille, ceux ci deviennent orange
- Une fois l'utilisateur sorti du menu, titres et fond blanc disparaissent et ne sont visibles que les pastilles
Au clic, on est redirigé vers le constat correspondant (dans la même page, avec une ancre interne).
Solution technique
(analyse de faisabilité, orientations/justification de la solution, décomposition en sous composants pour l'UI. Cette partie doit permettre de réaliser le découpage en issues de dév)
Décomposition en composants:
- une issue pour un composant pastille avec titre, url
- une issue pour la barre de nav verticale avec animation
- une issue pour modifier la page Diagnostic et ajouter les ids pour chaque constat et créer les liens internes pour les pastilles (cf issue #256 (closed) pour regarder les plans de page et les urls internes de chaque constat)
Notes en vrac de conversation avec @pmaruejouls :
- accessibilité => ca serait pas mieux d'avoir un bouton pour ouvrir la barre de nav en plus du hover ? (et pour refermer du coup. c'est aussi un argument seo, sinon le crawler ne verra pas les liens (on pourrait les mettre ailleurs dans la page en dur, par ex le footer): est ce que c'est un argument vu qu'on est toujours dans la même page ?
- comment elle marche en mobile ? hors scope, MVP, les constats sont empilés au niveau mobile