[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550)

[er-lim]

🥞 Problème

La nouvelle barre de navigation n'était pas encore utilisée sur Pix Admin

🥓 Proposition

L'ajouter avec un feature toggle (FT_PIX_ADMIN_NEW_SIDEBAR_ENABLED) le temps que ça soit validé fonctionnellement.

🧃 Remarques

• On en profite pour mettre un logo pour Pix Admin 😄

😋 Pour tester

En local

• Ajouter dans votre .env côté API la variable FT_PIX_ADMIN_NEW_SIDEBAR_ENABLED=true
• Vérifier que la nouvelle barre s'affiche.
• Faire des tests de non régression sur ça.

En RA

• Se connecter à la RA de Pix Admin
• Vérifier qu'il n'y a pas de régressions sur les pages

[pix-bot-github]

Une fois les applications déployées, elles seront accessibles via les liens suivants :

• App (.fr)
• App (.org)
• Orga (.fr)
• Orga (.org)
• Certif (.fr)
• Certif (.org)
• Junior
• Admin
• API
• API MaDDo
• Audit Logger

Les variables d'environnement seront accessibles via les liens suivants :

• scalingo front
• scalingo api
• scalingo api-maddo
• scalingo audit-logger

[AndreiaPena]

Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur d'écran

[AndreiaPena]

Proposition : sur la classe .page-body > remplacer padding par padding-top: var(--pix-spacing-3x);

Pour avoir ça :)

Et sur .page-header un border-radius: 5px; :D

[AndreiaPena]

D'ailleurs Profil cible n'a pas de fond blanc dans sa section et je trouve le résultat pas si mal !

On se rend compte que les blocs blancs prennent finalement beaucoup de place, et donc si on retire le padding, c'est déjà ça de gagné

Argument pour faire passer ce menu en PROD : on peut gagner un chouilla d'espace :p

[Faraopix]

Les entrées dans la nav sont très collées-serrées par rapport à ce que je vois sur storybook ou sur les autres app :

J'ai fait un petit tour sinon, fonctionnellement je ne vois rien d'anormal 👍

[Faraopix]

Et je ne sais pas si ça a un rapport mais je vois que "Type" ne s'affiche pas en entier :

[QuentinChapelain-ui]

Hello sur les différents retours :

• Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur d'écran : + 1 pour moi

• Pour le titre en haut de page, on peut enlever le fond blanc il n'apporte rien et rends moins ISO l'interface avec les autres plateforme orga et certif. Pour consrver un spacing et faciliter la lecture on peut comme sur app ajouter une ligne / seperateur en dessous de 1px gris pix-neutral-100.

• Je rejoins le retour de Géraldine au sujet du spacing des items du menu, il y. effectivment un espace sur orga. C'est un ajustement local à admin ?

• quand un item du menu est actif, l'icône devrait être fill. c'est le cas dans le DS : https://www.figma.com/design/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Nebulix?node-id=7018-10270&t=8xNyMEDFvAkP5DbK-1

• Ajouter un spacing entre l'input et le bouton "Charger"

[er-lim]

Je fais un message groupé par rapport à tous vos retours (merci pour les feedbacks 🙏 ). J'en ai traité une partie :

Les entrées dans la nav sont très collées-serrées par rapport à ce que je vois sur storybook ou sur les autres app :

@Faraopix C'est corrigé !

Et je ne sais pas si ça a un rapport mais je vois que "Type" ne s'affiche pas en entier :

@Faraopix Non ça n'a pas de rapport, c'est le composant PixSelect qui n'a pas calculé la bonne taille par rapport aux options. Je ne l'ai pas traité 😛

Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur

@AndreiaPena Fait !

Proposition : sur la classe .page-body > remplacer padding par padding-top: var(--pix-spacing-3x);
Et sur .page-header un border-radius: 5px; :D

@AndreiaPena C'est corrigé 😄

Pour le titre en haut de page, on peut enlever le fond blanc il n'apporte rien et rends moins ISO l'interface avec les autres plateforme orga et certif. Pour consrver un spacing et faciliter la lecture on peut comme sur app ajouter une ligne / seperateur en dessous de 1px gris pix-neutral-100.

@QuentinChapelain-ui c'est fait, par contre il n'y a pas de FT appliqué. On verra donc cette modification dans la version avec l'ancien menu.

Ajouter un spacing entre l'input et le bouton "Charger"

@QuentinChapelain-ui done !

quand un item du menu est actif, l'icône devrait être fill. c'est le cas dans le DS : https://www.figma.com/design/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Nebulix?node-id=7018-10270&t=8xNyMEDFvAkP5DbK-1

@QuentinChapelain-ui c'est au composant de gérer ça, la gestion devra être faite sur Pix UI

[AntoineLPix]

Les identifiants externes d'Orga et Centres qui sont longs débordent du tableau

La recherche utilisateur sur 13 pouces (mise à l'échelle 125% - NB on recommande 150% sur win11) avec affichage à 100% dans le navigateur ne tient plus sur une ligne, il faut passer à 80% dans le nav pour avoir les champs et boutons sur une ligne

Les adresses e-mails longues ne rentrent pas dans le tableau (ici page équipe de Pix Admin)

Tableau des sessions ne tient pas dans un écran 13 pouces (mise à l'échelle 125%) avec affichage à 100% dans le navigateur, il faut passer à 70%

Pas de souci sur 24 pouces mise à l'échelle 100% (reco win 11)