Issues critiques identifiées par audit screenshot iPhone 14 (390×844) :
1. SiteHeader cachait TOUTE la navigation derrière `sm:` →
utilisateur connecté mobile sans aucun lien accessible (Favoris,
Mes réservations, Mes locations, Mon compte, Espace hôte/CE/etc.).
Même Connexion/Créer un compte étaient inaccessibles sur mobile
anonyme.
2. CartBadge `hidden sm:inline` → panier complètement invisible sur
mobile même quand des items y sont. Le user perdait la trace de
ses ajouts.
src/components/MobileMenuButton.tsx (NEW) — client component avec :
- Bouton hamburger 9x9 visible uniquement sm:hidden
- Drawer right side, overlay sombre, scroll body bloqué quand ouvert
- 3 sections : Découvrir (publics), Mon compte (si auth), Espaces pro
(hôte/prestataire/CE/admin selon role + plugins activés)
- Sign out via signOut() de next-auth/react (côté client — évite
d'importer SignOutButton qui tirerait @/auth donc pg dans le bundle)
- Lien actif highlighted en emerald
- Ferme automatiquement sur changement de pathname (via useRef pour
éviter setState-in-effect)
SiteHeader.tsx :
- Tous les liens « auth » deviennent explicitement `hidden sm:inline`
+ Connexion/Créer un compte aussi (étaient toujours visibles avant,
surchargeaient le mobile)
- SignOutButton wrap `hidden sm:inline` pour ne pas dupliquer
- MobileMenuButton ajouté à la fin de la zone droite
CartBadge.tsx : `inline` au lieu de `hidden sm:inline` → visible
quel que soit le viewport.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
