ADR 0011 : Refactorisation de la charte graphique, intégration du menu latéral (Sidebar) et adaptabilité mobile

• Statut : Accepté (confirmé par le commanditaire le 15 juillet 2026)
• Décideurs : Marco (Commanditaire), Julien (Commanditaire), Seer (Développeur)
• Date : 15 juillet 2026

Contexte et Problème

Dans le cadre du refactoring idéal de l'interface utilisateur (s'inspirant du style et de l'ordonnancement de kobike-client-flow), nous devions :

1. Uniformiser le style graphique : Éliminer la profusion de styles inline (CSS in JS) qui encombraient les composants React de tableau de bord et harmoniser la typographie (passage à une police sans-serif moderne comme Inter au lieu de la police serif par défaut du navigateur).
2. Centraliser la navigation : Supprimer les barres d'en-tête (headers) dupliquées et collantes sur chaque tableau de bord au profit d'un menu latéral (Sidebar) persistant sur grand écran et d'une barre de navigation fixe sur mobile.
3. Garantir la compatibilité responsive : Permettre d'ouvrir et de fermer le menu latéral via un bouton hamburger (☰) et un volet coulissant (drawer) sur les petits écrans (mobiles/tablettes) pour que les actions secondaires restent accessibles.
4. Sécuriser l'affichage des projets : Restreindre l'affichage des filtres projets de la navigation aux seuls projets associés au membre connecté dans la table d'association project_members, afin de préserver la matrice de sécurité (par exemple, le collaborateur Seer ne doit pas voir les projets auxquels il n'est pas affecté).

Facteurs de Décision

• Aesthetics and premium looks : Adopter une esthétique épurée inspirée du design de Kobike.
• Performance et maintenabilité : Regrouper les styles CSS dans des fichiers dédiés (src/styles/*) importés par index.css, évitant la duplication de code et favorisant la réutilisabilité.
• Expérience Utilisateur (UX) cohérente : Avoir les filtres projets synchronisés à la fois dans le menu latéral et sur la page même du tableau de bord (via des pilules horizontales de raccourcis).
• Compatibilité mobile : Maintenir l'accessibilité à 100% des actions globales (Changer PIN, Profil, Déconnexion, Backups, Exports).

Options Envisagées

A. Maintenir des barres d'en-tête (headers) par page avec refactoring CSS local

• Avantage : Moins de changements de structure dans App.jsx.
• Inconvénient : Reste encombrant sur petit écran, duplication des boutons d'actions (Mon Profil, Exports, Backups) sur chaque dashboard.

B. Introduction d'un menu latéral (Sidebar) avec Drawer mobile (Recommandée)

• Avantage : Design épuré de type SaaS, centralisation des modaux globaux (Profil, PIN) à la racine de l'application, menu responsive sur mobile (tiroir coulissant avec fond flouté transparent), synchronisation simplifiée des filtres.
• Inconvénient : Nécessite une restructuration de la mise en page de base (App.jsx) et le passage des paramètres de filtrage de projets à travers les dashboards.

Décision Retenue

Option B, avec les caractéristiques suivantes :

1. Architecture CSS modulaire (src/styles/) :
   • theme.css : Contient les variables de charte graphique (couleurs, ombres, rayons, transitions).
   • layout.css : Conteneurs de structure globale et règles d'affichage adaptatif (Media Queries).
   • sidebar.css : Habillage de la Sidebar de navigation de bureau et du Drawer mobile.
   • auth.css : Styles de la page d'authentification.
   • dashboard.css : Styles des statistiques et en-têtes de tableaux de bord.
   • components.css : Boutons, formulaires de saisie, tags et modaux standardisés.
2. Navigation latérale :
   • Le composant Sidebar.jsx s'affiche de manière préservée sur desktop à gauche de la vue de contenu principale.
   • Le bas du menu regroupe l'outil de sauvegarde complète (grille 2x2 pour Sauver, Charger, CSV et JSON) et empile verticalement le bouton Mon Profil juste au-dessus du bouton de Déconnexion avec le même style graphique épuré.
3. Responsive Drawer (Mobile) & Toggles :
   • Sur écran de largeur <= 768px, la Sidebar est masquée par défaut et positionnée hors de l'écran (left: -260px).
   • Une barre supérieure fixe (.mobile-header) affiche le logo et le bouton hamburger (☰).
   • Cliquer sur ☰ fait glisser le tiroir de navigation et applique un voile sombre (.sidebar-backdrop) avec effet de flou en arrière-plan. Cliquer sur le backdrop ou sur le bouton de fermeture ✕ masque le menu. La sélection d'un lien ferme également le tiroir automatiquement.
4. Vues de projet basées sur les adhésions :
   • Le composant Sidebar.jsx filtre les projets en fonction du roster project_members pour les Managers et Collaborateurs.
   • Les composants de tableau de bord affichent la barre de filtres projets horizontale (.project-filter-bar) dès que le nombre de projets rattachés de l'utilisateur est supérieur ou égal à 1 (length >= 1), afin de proposer un raccourci de filtrage sur la page elle-même de manière cohérente pour tous.

Conséquences

Positives

• Amélioration graphique majeure (utilisation de la police Inter, ombres douces, micro-animations de survol, bordures fines).
• Structure de code allégée dans App.jsx et réduction de la duplication de code dans les dashboards.
• Contrôles de profil et de PIN globaux (au lieu de 3 déclarations indépendantes et dupliquées).
• Navigation ergonomique sur les appareils mobiles.

Négatives

• Ajout de fichiers CSS supplémentaires à maintenir de manière synchrone en cas de modification de charte graphique.