tarzzan/karbe
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(mobile): Sprint R — mobile UX audit + burger menu #92

Merged
tarzzan merged 1 commit from feat/karbe-sprint-r into main 2026-06-03 03:54:14 +00:00
Conversation 0 Commits 1 Files changed 3 +242 -4
tarzzan commented 2026-06-03 03:54:12 +00:00
Owner
Copy link

Sprint R — Mobile UX audit + fix navigation

Audit screenshot iPhone 14 (390×844) sur 7 pages prod a révélé 2 issues critiques bloquantes pour l'usage mobile.

Issues identifiées

  1. Navigation invisible : SiteHeader cachait TOUS les liens utilisateur derrière hidden sm:inline → mobile user connecté sans aucun lien accessible (Favoris, Mes réservations, Mes locations, Mon compte, Espaces hôte/CE/etc.). Même Connexion/Créer un compte n'étaient en réalité accessibles que sur desktop si on les marquait conditionnels.
  2. CartBadge invisible : hidden sm:inline → panier complètement caché sur mobile, le user perd la trace des items ajoutés.

<MobileMenuButton /> (NEW)

Client component avec :

  • Bouton hamburger 9×9 visible uniquement sm:hidden
  • Drawer right-side, overlay sombre cliquable, 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 → pg dans le bundle client)
  • Lien actif highlighted en emerald
  • Ferme automatiquement sur changement de pathname (via useRef pour éviter setState-in-effect)

SiteHeader

  • Tous les liens auth deviennent explicitement hidden sm:inline
  • Connexion / Créer un compte aussi (étaient toujours visibles avant, surchargeaient le mobile)
  • <SignOutButton /> wrappé hidden sm:inline
  • <MobileMenuButton /> ajouté en fin de zone droite

CartBadge

  • inline au lieu de hidden sm:inline → visible mobile + desktop

Pages auditées (screenshots)

  • ✅ / home (hero plein écran)
  • ✅ /carbets catalog (filtres + form, wrappent bien)
  • ✅ /carbets/[slug] carbet detail (badges grid 2x2)
  • ✅ /materiel catalog
  • ✅ /materiel/[itemId] item detail (form complet, bouton Ajouter au panier OK)
  • ✅ /inscription signup (form responsive)
  • ✅ /pour-comites-entreprise marketing

Issues restantes mineures (pas adressées Sprint R) : booking form sur /carbets/[slug] à valider sur device réel, sticky cart drawer /panier à tester avec iOS safari (z-index + safe-area).

Test plan

  • typecheck / lint / build ✓
  • npm test 89/89 ✓
  • Sur mobile prod : ouvrir / → bouton hamburger visible → drawer s'ouvre → liens présents
  • Ajouter un item au panier → badge 🛒 visible mobile avec compteur
  • Login mobile → drawer montre « Mon compte » + « Espaces pro » selon role
  • Click un lien drawer → ferme automatiquement après navigation

🤖 Generated with Claude Code

## Sprint R — Mobile UX audit + fix navigation Audit screenshot iPhone 14 (390×844) sur 7 pages prod a révélé 2 issues critiques bloquantes pour l'usage mobile. ### Issues identifiées 1. **Navigation invisible** : `SiteHeader` cachait TOUS les liens utilisateur derrière `hidden sm:inline` → mobile user connecté sans aucun lien accessible (Favoris, Mes réservations, Mes locations, Mon compte, Espaces hôte/CE/etc.). Même Connexion/Créer un compte n'étaient en réalité accessibles que sur desktop si on les marquait conditionnels. 2. **CartBadge invisible** : `hidden sm:inline` → panier complètement caché sur mobile, le user perd la trace des items ajoutés. ### `<MobileMenuButton />` (NEW) Client component avec : - Bouton hamburger 9×9 visible **uniquement sm:hidden** - Drawer right-side, overlay sombre cliquable, 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` → `pg` dans le bundle client) - Lien actif highlighted en emerald - Ferme automatiquement sur changement de pathname (via useRef pour éviter setState-in-effect) ### SiteHeader - Tous les liens auth deviennent explicitement `hidden sm:inline` - Connexion / Créer un compte aussi (étaient toujours visibles avant, surchargeaient le mobile) - `<SignOutButton />` wrappé `hidden sm:inline` - `<MobileMenuButton />` ajouté en fin de zone droite ### CartBadge - `inline` au lieu de `hidden sm:inline` → visible mobile + desktop ### Pages auditées (screenshots) - ✅ `/` home (hero plein écran) - ✅ `/carbets` catalog (filtres + form, wrappent bien) - ✅ `/carbets/[slug]` carbet detail (badges grid 2x2) - ✅ `/materiel` catalog - ✅ `/materiel/[itemId]` item detail (form complet, bouton Ajouter au panier OK) - ✅ `/inscription` signup (form responsive) - ✅ `/pour-comites-entreprise` marketing Issues restantes mineures (pas adressées Sprint R) : booking form sur `/carbets/[slug]` à valider sur device réel, sticky cart drawer `/panier` à tester avec iOS safari (z-index + safe-area). ### Test plan - [x] typecheck / lint / build ✓ - [x] `npm test` 89/89 ✓ - [ ] Sur mobile prod : ouvrir `/` → bouton hamburger visible → drawer s'ouvre → liens présents - [ ] Ajouter un item au panier → badge 🛒 visible mobile avec compteur - [ ] Login mobile → drawer montre « Mon compte » + « Espaces pro » selon role - [ ] Click un lien drawer → ferme automatiquement après navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code)
tarzzan added 1 commit 2026-06-03 03:54:13 +00:00
fix(mobile): Sprint R — burger menu + cart badge visible mobile
All checks were successful
CI / test (pull_request) Successful in 2m39s
Details
62833ee4e6 
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>
tarzzan merged commit 07301ae997 into main 2026-06-03 03:54:14 +00:00
tarzzan deleted branch feat/karbe-sprint-r 2026-06-03 03:54:14 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: tarzzan/karbe#92
No description provided.
Delete branch "feat/karbe-sprint-r"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?