Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/stories/2.1.navbar-responsive.md
+++ b/docs/stories/2.1.navbar-responsive.md
@@ -0,0 +1,388 @@
+# Story 2.1: Navbar Responsive avec Menu Mobile
+
+## Status
+
+Ready for Dev
+
+## Story
+
+**As a** visiteur,
+**I want** disposer d'une navigation claire et accessible sur tous les appareils,
+**so that** je trouve facilement les sections du portfolio.
+
+## Acceptance Criteria
+
+1. `templates/navbar.php` contient le menu de navigation avec les liens : Accueil, Projets, Compétences, Me Découvrir, Contact
+2. La navbar est fixe en haut de page (sticky) et reste visible au scroll
+3. Sur mobile, un menu "hamburger" affiche/masque les liens en JavaScript vanilla
+4. Le lien de la page active est visuellement distingué (couleur/soulignement)
+5. La navbar est responsive et s'adapte aux 3 breakpoints (mobile, tablette, desktop)
+6. La navbar a un effet d'ombre au scroll (optionnel mais recommandé)
+
+## 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
+
+- [] **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é
+
+- [] **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`
+
+- [] **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
+
+- [] **Task 5 : Rendre la navbar responsive** (AC: 5)
+  - [] Mobile : logo + hamburger uniquement
+  - [] Tablette/Desktop : tous les liens visibles
+  - [] 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
+
+- [] **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
+
+## Dev Notes
+
+### Structure HTML de la Navbar
+
+```php
+<?php
+/**
+ * Template Navbar
+ * Variables disponibles :
+ * - $currentPage (string) : identifiant de la page active ('home', 'projects', 'skills', 'about', 'contact')
+ */
+
+$currentPage = $currentPage ?? 'home';
+
+$navLinks = [
+    ['id' => 'home', 'label' => 'Accueil', 'url' => '/'],
+    ['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'],
+    ['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'],
+    ['id' => 'about', 'label' => 'Me Découvrir', 'url' => '/a-propos'],
+    ['id' => 'contact', 'label' => 'Contact', 'url' => '/contact', 'isCta' => true],
+];
+?>
+
+<header id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border/50 transition-shadow duration-300">
+    <nav class="container-content" aria-label="Navigation principale">
+        <div class="flex items-center justify-between h-16 lg:h-20">
+
+            <!-- Logo -->
+            <a href="/" class="text-xl font-bold text-text-primary hover:text-primary transition-colors">
+                Portfolio
+            </a>
+
+            <!-- Navigation Desktop -->
+            <ul class="hidden lg:flex items-center gap-1">
+                <?php foreach ($navLinks as $link): ?>
+                    <?php if (!empty($link['isCta'])): ?>
+                        <li class="ml-4">
+                            <a href="<?= $link['url'] ?>" class="btn-primary text-sm">
+                                <?= $link['label'] ?>
+                            </a>
+                        </li>
+                    <?php else: ?>
+                        <li>
+                            <a href="<?= $link['url'] ?>"
+                               class="nav-link <?= $currentPage === $link['id'] ? 'nav-link-active' : '' ?>">
+                                <?= $link['label'] ?>
+                            </a>
+                        </li>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </ul>
+
+            <!-- Bouton Hamburger Mobile -->
+            <button
+                id="mobile-menu-toggle"
+                class="lg:hidden p-2 text-text-primary hover:text-primary transition-colors"
+                aria-label="Ouvrir le menu"
+                aria-expanded="false"
+                aria-controls="mobile-menu"
+            >
+                <!-- Icône Hamburger -->
+                <svg class="w-6 h-6 hamburger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                </svg>
+                <!-- Icône Close (hidden par défaut) -->
+                <svg class="w-6 h-6 close-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Menu Mobile -->
+        <div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
+            <ul class="py-4 space-y-2 border-t border-border">
+                <?php foreach ($navLinks as $link): ?>
+                    <li>
+                        <a href="<?= $link['url'] ?>"
+                           class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
+                            <?= $link['label'] ?>
+                        </a>
+                    </li>
+                <?php endforeach; ?>
+            </ul>
+        </div>
+    </nav>
+</header>
+
+<!-- Spacer pour compenser la navbar fixed -->
+<div class="h-16 lg:h-20"></div>
+```
+
+### Classes CSS Additionnelles (input.css)
+
+Ajouter dans `@layer components` :
+
+```css
+/* Navigation links */
+.nav-link {
+    @apply px-4 py-2 text-sm font-medium text-text-secondary
+           hover:text-text-primary transition-colors rounded-lg
+           hover:bg-surface-light;
+}
+
+.nav-link-active {
+    @apply text-primary bg-primary/10;
+}
+```
+
+### JavaScript pour le Menu Mobile
+
+```javascript
+// assets/js/main.js
+
+document.addEventListener('DOMContentLoaded', () => {
+    initMobileMenu();
+    initNavbarScroll();
+});
+
+/**
+ * Gestion du menu mobile
+ */
+function initMobileMenu() {
+    const toggle = document.getElementById('mobile-menu-toggle');
+    const menu = document.getElementById('mobile-menu');
+
+    if (!toggle || !menu) return;
+
+    const hamburgerIcon = toggle.querySelector('.hamburger-icon');
+    const closeIcon = toggle.querySelector('.close-icon');
+
+    function openMenu() {
+        menu.classList.remove('hidden');
+        menu.setAttribute('aria-hidden', 'false');
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.setAttribute('aria-label', 'Fermer le menu');
+        hamburgerIcon?.classList.add('hidden');
+        closeIcon?.classList.remove('hidden');
+    }
+
+    function closeMenu() {
+        menu.classList.add('hidden');
+        menu.setAttribute('aria-hidden', 'true');
+        toggle.setAttribute('aria-expanded', 'false');
+        toggle.setAttribute('aria-label', 'Ouvrir le menu');
+        hamburgerIcon?.classList.remove('hidden');
+        closeIcon?.classList.add('hidden');
+    }
+
+    function toggleMenu() {
+        const isOpen = toggle.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            closeMenu();
+        } else {
+            openMenu();
+        }
+    }
+
+    // Toggle au clic
+    toggle.addEventListener('click', toggleMenu);
+
+    // Fermer au clic sur un lien
+    menu.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', closeMenu);
+    });
+
+    // Fermer avec Escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+            closeMenu();
+            toggle.focus();
+        }
+    });
+
+    // Fermer si on redimensionne vers desktop
+    window.addEventListener('resize', () => {
+        if (window.innerWidth >= 1024) {
+            closeMenu();
+        }
+    });
+}
+
+/**
+ * Effet d'ombre au scroll
+ */
+function initNavbarScroll() {
+    const navbar = document.getElementById('navbar');
+    if (!navbar) return;
+
+    let lastScroll = 0;
+
+    window.addEventListener('scroll', () => {
+        const currentScroll = window.scrollY;
+
+        if (currentScroll > 10) {
+            navbar.classList.add('shadow-lg');
+        } else {
+            navbar.classList.remove('shadow-lg');
+        }
+
+        lastScroll = currentScroll;
+    }, { passive: true });
+}
+```
+
+### Intégration dans les Pages
+
+Modifier `index.php` et les futures pages :
+
+```php
+<?php
+require_once __DIR__ . '/includes/functions.php';
+
+include_template('header', [
+    'pageTitle' => 'Accueil',
+]);
+
+include_template('navbar', [
+    'currentPage' => 'home'
+]);
+?>
+
+<!-- Contenu de la page -->
+
+<?php include_template('footer'); ?>
+```
+
+### Structure de Navigation
+
+| Lien | URL | ID |
+|------|-----|----|
+| Accueil | `/` | home |
+| Projets | `/projets` | projects |
+| Compétences | `/competences` | skills |
+| Me Découvrir | `/a-propos` | about |
+| Contact (CTA) | `/contact` | contact |
+
+### Breakpoints Responsive
+
+| Breakpoint | Comportement |
+|------------|--------------|
+| Mobile (< 1024px) | Logo + hamburger, menu caché |
+| Desktop (≥ 1024px) | Tous les liens visibles |
+
+### Accessibilité
+
+- `aria-label` sur le bouton hamburger
+- `aria-expanded` pour indiquer l'état du menu
+- `aria-controls` pour lier le bouton au menu
+- `aria-hidden` sur le menu mobile
+- Navigation au clavier (Tab, Escape)
+- Focus visible sur tous les éléments interactifs
+
+## Testing
+
+### Tests Fonctionnels
+
+- [ ] Tous les liens sont présents et cliquables
+- [ ] La navbar reste visible au scroll (sticky)
+- [ ] Le lien actif est visuellement distinct
+- [ ] L'ombre apparaît au scroll
+
+### Tests Mobile
+
+- [ ] Le bouton hamburger est visible sur mobile
+- [ ] Le menu s'ouvre au clic
+- [ ] Le menu se ferme au clic sur un lien
+- [ ] Le menu se ferme avec Escape
+- [ ] L'icône change (hamburger ↔ X)
+
+### Tests Accessibilité
+
+- [ ] Navigation complète au clavier
+- [ ] `aria-expanded` se met à jour
+- [ ] Focus visible sur tous les éléments
+- [ ] Lecteur d'écran annonce l'état du menu
+
+### Tests Responsive
+
+```
+Mobile (375px)  → hamburger visible, liens cachés
+Tablet (768px)  → hamburger visible, liens cachés
+Desktop (1024px) → liens visibles, hamburger caché
+Wide (1440px)   → liens visibles, centré
+```
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 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)
+
+### Debug Log References
+
+_À compléter par le dev agent_
+
+### Completion Notes List
+
+- templates/navbar.php créé avec structure sémantique complète
+- Menu hamburger avec icônes SVG (hamburger/close)
+- JavaScript vanilla pour toggle menu, fermeture Escape, resize
+- Effet d'ombre au scroll (shadow-lg)
+- Classes nav-link et nav-link-active ajoutées à input.css
+- É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)
+
+### File List
+
+| Fichier | Action |
+|---------|--------|
+| `templates/navbar.php` | Créé |
+| `assets/css/input.css` | Modifié (classes nav-link) |
+| `assets/js/main.js` | Modifié (menu mobile + scroll) |
+| `index.php` | Modifié (intégration navbar) |
+| `assets/css/output.css` | Regénéré |
+
+## QA Results
+
+_À compléter par le QA agent_