Aller au contenu principal

Navigation Mobile

Vue d'ensemble​

Le système de navigation mobile a été amélioré pour offrir une expérience optimale sur les appareils mobiles avec un menu utilisateur en plein écran et des sous-menus expansibles.

Composants​

UserMenuMobile​

Fichier : frontend/src/components/layout/UserMenuMobile.tsx

Composant de menu utilisateur optimisé pour mobile qui s'affiche en plein écran avec :

  • Affichage full-screen : Menu qui occupe tout l'écran sur mobile
  • Contenu scrollable : Scroll automatique si le contenu est trop long
  • Sous-menus expansibles : Sections avec chevrons pour expansion/collapse
  • Navigation tactile : Optimisé pour les interactions tactiles

Structure du menu :

┌─────────────────────────┐
│ Avatar | Nom | Email [X]│
├─────────────────────────┤
│ Badge de rôle           │
├─────────────────────────┤
│ ▼ Mon compte            │
│   → Profil              │
│   → Entreprise           │
├─────────────────────────┤
│ ▼ Paramètres            │
│   → Application         │
│   → Réservation         │
│   → RGPD                │
│   → Connexions          │
│   → Plans               │
├─────────────────────────┤
│ ▼ Système (Admin)       │
│   → Administration      │
│   → Plans d'abonnement  │
│   → ▼ Paramètres app    │
│      → Modèles          │
│      → Types sessions   │
│      → Plans paiement   │
│      → Types tâches     │
│      → Workflows        │
│      → Templates email  │
├─────────────────────────┤
│ ✨ Devenir Admin        │
├─────────────────────────┤
│ 🚪 Déconnexion          │
└─────────────────────────┘

UserDropdown​

Fichier : frontend/src/components/layout/UserDropdown.tsx

Composant de menu utilisateur pour desktop qui détecte automatiquement le mobile :

  • Détection automatique : Utilise useEffect pour détecter la largeur d'écran (< 1024px)
  • Basculement automatique : Utilise UserMenuMobile sur mobile, DropdownMenu sur desktop
  • Responsive : S'adapte automatiquement à la taille de l'écran

MobileSidebar​

Fichier : frontend/src/components/layout/MobileSidebar.tsx

Sidebar mobile avec :

  • Animation slide-in : Slide depuis la gauche avec animation
  • Backdrop : Overlay sombre pour fermer au clic
  • Navigation complète : Tous les éléments de navigation avec sous-menus
  • Intégration UserMenuMobile : Utilise UserMenuButton qui ouvre UserMenuMobile

Utilisation​

Desktop​

Sur desktop (> 1024px), le menu utilisateur s'affiche comme un dropdown classique dans la sidebar.

Mobile​

Sur mobile (< 1024px), le menu utilisateur s'affiche en plein écran avec :

  1. Ouverture : Clic sur l'avatar/nom dans la sidebar mobile
  2. Navigation : Clic sur les sections pour les expand/collapse
  3. Fermeture : Clic sur le bouton X ou sur le backdrop

Détection Mobile​

La détection se fait côté client avec :

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
  const checkMobile = () => {
    setIsMobile(window.innerWidth < 1024); // lg breakpoint
  };
  checkMobile();
  window.addEventListener("resize", checkMobile);
  return () => window.removeEventListener("resize", checkMobile);
}, []);

Améliorations Futures​

  • Amélioration de la responsivité des pages principales
  • Optimisation des tableaux pour mobile (scroll horizontal, colonnes adaptatives)
  • Amélioration des formulaires pour mobile (champs plus grands, meilleure disposition)
  • Optimisation des cartes et listes pour mobile
  • Tests d'intégration mobile

Fichiers Modifiés/Créés​

  • frontend/src/components/layout/UserMenuMobile.tsx - Nouveau composant full-screen
  • frontend/src/components/layout/UserDropdown.tsx - Détection mobile et basculement
  • frontend/src/components/layout/MobileSidebar.tsx - Intégration UserMenuMobile
  • frontend/src/i18n/locales/fr/translation.json - Traductions pour menu utilisateur