3 zones distinctes et égales dans la bottom nav. Pas de bouton
central qui crée une hiérarchie visuelle confuse.
🔄
FAB contextuel
Le bouton d'action change selon la page. Sur Dashboard → Vélo, sur
Maintenance → Wrench, etc. Toujours pertinent.
⚡
Accès rapide
Le sheet Atelier regroupe les 3 services techniques. Un seul tap
pour accéder à Maintenance, Bikefit ou Pression.
📱
Mobile-first
Optimisé pour mobile avec safe areas iOS, transitions fluides, et
zone ergonomique respectée pour le pouce.
♿
Accessible
Tous les boutons ont des labels ARIA, indicateurs visuels clairs, et
contraste WCAG AA respecté.
🔧
Maintenable
Code modulaire avec composants isolés. Documentation complète.
Facile d'ajouter de nouveaux services.
🏗️ Structure de l'architecture
📱
Contenu de la page
Padding bottom: 112px
⊕
FAB Contextuel
z-50, bottom: 80px
🏠
Accueil
🔧
Atelier
📊
Données
Bottom Navigation (z-40, fixed bottom)
Safe Area (iOS home indicator)
🔀 Flux utilisateur
1. Dashboard
FAB affiche 🚲
→
2. Clic FAB
Redirige vers /bikes/new
1. Clic Atelier
Ouvre le sheet
→
2. Sélection service
Ex: Maintenance
→
3. Page Maintenance
FAB change en 🔧
💡 Principe clé
Le FAB s'adapte automatiquement au contexte. L'utilisateur a
toujours l'action la plus pertinente à portée de pouce, sans
devoir chercher dans des menus.