[Mobile] Barre de navigation : icônes désalignées → icônes seules #105

New issue

Closed

opened 2026-09-08 00:47:38 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-08 00:47:38 +02:00

Owner

Résumé

Sur téléphone (connecté), l'icône de l'onglet « Liste de courses » de la barre de navigation du bas est visiblement plus haute que celles des autres onglets. Proposition : retirer les libellés visibles de toute la barre et ne garder que les icônes.

Contexte (trouvé en auditant le code, pas supposé)

La nav mobile est <nav class="app-bottom-nav"> (composant MobileBottomNav dans apps/web/src/layouts/AppLayout.tsx), choisie via useIsMobileViewport() — 3 NAV_ITEMS en <NavLink> + un bouton « Plus ». Chaque item : <Icon aria-hidden /> <span className="label">…</span>.
apps/web/src/layouts/AppLayout.scss .app-bottom-nav : display:flex, chaque a, &__more { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center }, .label { font-size: var(--font-size-xs) }, hauteur de barre calc(3.5rem + env(safe-area-inset-bottom)).
Cause : « Liste de courses » (16 caractères) passe sur 2 lignes dans un onglet à ~90 px de large alors que « Planning » / « Recettes » / « Plus » tiennent sur 1 ligne. Le bloc icône+libellé centré (justify-content:center) est donc plus haut pour cet onglet → son icône remonte par rapport aux autres.
Il existe déjà un motif « libellés cachés » : AppLayout.scss @include bp.phone-up { &.collapsed { .label, .chevron { display:none } } } (rail desktop replié).

Contenu attendu

Dans .app-bottom-nav, masquer visuellement le .label de tous les items (les 3 NavLink + « Plus ») → barre 100 % icônes, largeur/alignement uniformes. Réutiliser le motif .label { display:none } du bloc .collapsed.

Accessibilité : le libellé texte étant aujourd'hui le nom accessible, le conserver en aria-label sur chaque NavLink/bouton (ou en <span> visually-hidden) — ne pas juste supprimer le texte.

Couverture : mettre à jour le(s) spec(s) Cypress de la bottom nav (layout.cy.ts / spec bottom-nav) qui vérifient la visibilité des libellés.

Dépendances

Aucune. Touche uniquement AppLayout.tsx + AppLayout.scss.

## Résumé Sur téléphone (connecté), l'icône de l'onglet « Liste de courses » de la barre de navigation du bas est visiblement plus haute que celles des autres onglets. Proposition : retirer les **libellés visibles de toute la barre** et ne garder que les icônes. ## Contexte (trouvé en auditant le code, pas supposé) - La nav mobile est `<nav class="app-bottom-nav">` (composant `MobileBottomNav` dans `apps/web/src/layouts/AppLayout.tsx`), choisie via `useIsMobileViewport()` — 3 `NAV_ITEMS` en `<NavLink>` + un bouton « Plus ». Chaque item : `<Icon aria-hidden /> <span className="label">…</span>`. - `apps/web/src/layouts/AppLayout.scss` `.app-bottom-nav` : `display:flex`, chaque `a, &__more { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center }`, `.label { font-size: var(--font-size-xs) }`, hauteur de barre `calc(3.5rem + env(safe-area-inset-bottom))`. - Cause : « Liste de courses » (16 caractères) **passe sur 2 lignes** dans un onglet à ~90 px de large alors que « Planning » / « Recettes » / « Plus » tiennent sur 1 ligne. Le bloc icône+libellé centré (`justify-content:center`) est donc plus haut pour cet onglet → son icône remonte par rapport aux autres. - Il existe déjà un motif « libellés cachés » : `AppLayout.scss` `@include bp.phone-up { &.collapsed { .label, .chevron { display:none } } }` (rail desktop replié). ## Contenu attendu Dans `.app-bottom-nav`, masquer visuellement le `.label` de **tous** les items (les 3 `NavLink` + « Plus ») → barre 100 % icônes, largeur/alignement uniformes. Réutiliser le motif `.label { display:none }` du bloc `.collapsed`. Accessibilité : le libellé texte étant aujourd'hui le nom accessible, le conserver en `aria-label` sur chaque `NavLink`/bouton (ou en `<span>` visually-hidden) — ne pas juste supprimer le texte. Couverture : mettre à jour le(s) spec(s) Cypress de la bottom nav (`layout.cy.ts` / spec bottom-nav) qui vérifient la visibilité des libellés. ## Dépendances Aucune. Touche uniquement `AppLayout.tsx` + `AppLayout.scss`.