✨ Story 2.1: navbar responsive
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## Status
|
||||
|
||||
Ready for Dev
|
||||
review
|
||||
|
||||
## Story
|
||||
|
||||
@@ -21,44 +21,44 @@ Ready for Dev
|
||||
|
||||
## Tasks / Subtasks
|
||||
|
||||
- [] **Task 1 : Créer le template navbar.php** (AC: 1, 2)
|
||||
- [] Créer `templates/navbar.php`
|
||||
- [] Ajouter la structure HTML sémantique (`<header>`, `<nav>`)
|
||||
- [] Ajouter le logo/nom du site (lien vers accueil)
|
||||
- [] Ajouter les liens de navigation desktop
|
||||
- [] Appliquer les classes Tailwind pour sticky + fond
|
||||
- [x] **Task 1 : Créer le template navbar.php** (AC: 1, 2)
|
||||
- [x] Créer `templates/navbar.php`
|
||||
- [x] Ajouter la structure HTML sémantique (`<header>`, `<nav>`)
|
||||
- [x] Ajouter le logo/nom du site (lien vers accueil)
|
||||
- [x] Ajouter les liens de navigation desktop
|
||||
- [x] Appliquer les classes Tailwind pour sticky + fond
|
||||
|
||||
- [] **Task 2 : Implémenter le menu mobile hamburger** (AC: 3)
|
||||
- [] Ajouter le bouton hamburger (icône 3 barres)
|
||||
- [] Ajouter le menu mobile (overlay ou slide)
|
||||
- [] Masquer le bouton sur desktop, afficher sur mobile
|
||||
- [] Ajouter l'attribut `aria-expanded` pour l'accessibilité
|
||||
- [x] **Task 2 : Implémenter le menu mobile hamburger** (AC: 3)
|
||||
- [x] Ajouter le bouton hamburger (icône 3 barres)
|
||||
- [x] Ajouter le menu mobile (overlay ou slide)
|
||||
- [x] Masquer le bouton sur desktop, afficher sur mobile
|
||||
- [x] Ajouter l'attribut `aria-expanded` pour l'accessibilité
|
||||
|
||||
- [] **Task 3 : Créer le JavaScript pour le menu mobile** (AC: 3)
|
||||
- [] Créer ou mettre à jour `assets/js/main.js`
|
||||
- [] Implémenter le toggle du menu (ouvert/fermé)
|
||||
- [] Fermer le menu au clic sur un lien
|
||||
- [] Fermer le menu avec la touche Escape
|
||||
- [] Gérer l'état `aria-expanded`
|
||||
- [x] **Task 3 : Créer le JavaScript pour le menu mobile** (AC: 3)
|
||||
- [x] Créer ou mettre à jour `assets/js/main.js`
|
||||
- [x] Implémenter le toggle du menu (ouvert/fermé)
|
||||
- [x] Fermer le menu au clic sur un lien
|
||||
- [x] Fermer le menu avec la touche Escape
|
||||
- [x] Gérer l'état `aria-expanded`
|
||||
|
||||
- [] **Task 4 : Implémenter l'état actif des liens** (AC: 4)
|
||||
- [] Passer la page courante via une variable PHP
|
||||
- [] Appliquer une classe visuelle sur le lien actif
|
||||
- [] Utiliser la couleur primary ou un soulignement
|
||||
- [x] **Task 4 : Implémenter l'état actif des liens** (AC: 4)
|
||||
- [x] Passer la page courante via une variable PHP
|
||||
- [x] Appliquer une classe visuelle sur le lien actif
|
||||
- [x] Utiliser la couleur primary ou un soulignement
|
||||
|
||||
- [] **Task 5 : Rendre la navbar responsive** (AC: 5)
|
||||
- [] Mobile : logo + hamburger uniquement
|
||||
- [] Tablette/Desktop : tous les liens visibles
|
||||
- [] Vérifier les 3 breakpoints
|
||||
- [x] **Task 5 : Rendre la navbar responsive** (AC: 5)
|
||||
- [x] Mobile : logo + hamburger uniquement
|
||||
- [x] Tablette/Desktop : tous les liens visibles
|
||||
- [x] Vérifier les 3 breakpoints
|
||||
|
||||
- [] **Task 6 : Ajouter l'effet au scroll** (AC: 6)
|
||||
- [] Ajouter une ombre quand la page est scrollée
|
||||
- [] Utiliser JavaScript pour détecter le scroll
|
||||
- [] Transition smooth pour l'effet
|
||||
- [x] **Task 6 : Ajouter l'effet au scroll** (AC: 6)
|
||||
- [x] Ajouter une ombre quand la page est scrollée
|
||||
- [x] Utiliser JavaScript pour détecter le scroll
|
||||
- [x] Transition smooth pour l'effet
|
||||
|
||||
- [] **Task 7 : Intégrer la navbar dans les pages**
|
||||
- [] Modifier `header.php` ou les pages pour inclure la navbar
|
||||
- [] Passer la variable `$currentPage` à la navbar
|
||||
- [x] **Task 7 : Intégrer la navbar dans les pages**
|
||||
- [x] Modifier `header.php` ou les pages pour inclure la navbar
|
||||
- [x] Passer la variable `$currentPage` à la navbar
|
||||
|
||||
## Dev Notes
|
||||
|
||||
@@ -349,17 +349,18 @@ Wide (1440px) → liens visibles, centré
|
||||
|
||||
| Date | Version | Description | Author |
|
||||
|------|---------|-------------|--------|
|
||||
| 2026-02-04 | 0.1 | Implementation story 2.1 | Amelia |
|
||||
| 2026-01-22 | 0.1 | Création initiale de la story | Sarah (PO) |
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Agent Model Used
|
||||
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
GPT-5 Codex
|
||||
|
||||
### Debug Log References
|
||||
|
||||
_À compléter par le dev agent_
|
||||
- tests/navbar.test.ps1: navbar coverage
|
||||
|
||||
### Completion Notes List
|
||||
|
||||
@@ -371,7 +372,8 @@ _À compléter par le dev agent_
|
||||
- État actif via variable $currentPage
|
||||
- Accessibilité complète (aria-expanded, aria-controls, aria-hidden)
|
||||
- Spacer pour compenser navbar fixed
|
||||
- CSS regénéré (15 Ko)
|
||||
- CSS régénéré via `npm run build`
|
||||
- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
|
||||
|
||||
### File List
|
||||
|
||||
@@ -382,6 +384,8 @@ _À compléter par le dev agent_
|
||||
| `assets/js/main.js` | Modifié (menu mobile + scroll) |
|
||||
| `index.php` | Modifié (intégration navbar) |
|
||||
| `assets/css/output.css` | Regénéré |
|
||||
| `tests/navbar.test.ps1` | Créé |
|
||||
| `tests/run.ps1` | Modifié |
|
||||
|
||||
## QA Results
|
||||
|
||||
|
||||
Reference in New Issue
Block a user