# Story: Burger Menu Redesign with Main/Secondary Styles and Background Image

## 1. Contexte (Context)

The current navigation menu is a simple horizontal list of links displayed when 2+ published pages exist. As part of the frontend redesign initiative aligned with the new Figma mockups, the menu needs to be transformed into a mobile-first burger menu with enhanced visual design. This story implements the navigation pattern that will be used across the entire site, supporting the project's goal of delivering a modern, responsive showcase website. The implementation must respect the existing bilingual architecture (FR/EN) and integrate with the current Page entity menu system (published pages with `parent = null`, ordered by `menuOrder`).

## 2. Le besoin (User Story)

```
En tant qu'utilisateur du site (visiteur ou administrateur)
Je souhaite avoir un menu burger moderne avec distinction visuelle entre liens principaux et secondaires, ainsi qu'une image de fond personnalisable
Afin de bénéficier d'une navigation mobile-first cohérente avec la nouvelle identité visuelle du site
```

## 3. Liens utiles (Useful Links)

- **Figma - Menu burger global**: https://www.figma.com/design/ldjPgBvJ6j2I9RVTa17H33/Galta_2026?node-id=92-109
- **Figma - Liens principaux (main)**: https://www.figma.com/design/ldjPgBvJ6j2I9RVTa17H33/Galta_2026?node-id=92-156
- **Figma - Liens secondaires (secondary)**: https://www.figma.com/design/ldjPgBvJ6j2I9RVTa17H33/Galta_2026?node-id=92-160
- **Code existant**:
  - Template actuel: `templates/components/_nav.html.twig`
  - Entity Page: `src/Entity/Page.php`
  - AppExtension (menu_pages): `src/Twig/AppExtension.php`
- **Architecture**:
  - CLAUDE.md - Section "Bilingual Translation System" (URL-based locale detection)
  - CLAUDE.md - Section "Entity Structure" (Page entity patterns)
  - CLAUDE.md - Section "Docker Command Execution" (pour commandes npm/composer)
  - CLAUDE.md - Section "TypeScript Only" (frontend code standards)
  - spec-driven-development/rules/data-transfer-objects.md (pour formulaires admin)
  - spec-driven-development/rules/business-services.md (pour logique métier upload image)

## 4. Critères d'acceptation (Acceptance Criteria)

### Scénario 1: Ajout du champ menuStyle à l'entité Page
```gherkin
Scénario: Un administrateur peut définir le style de menu pour chaque page
  Étant donné que je suis connecté en tant qu'administrateur
  Et que j'édite une page existante dans le BO
  Quand j'accède au formulaire de modification de page
  Alors je vois un champ "Style de menu" avec les options "Principal" et "Secondaire"
  Et la valeur par défaut est "Principal"
  Et je peux sélectionner "Secondaire" pour certaines pages
  Et la valeur est sauvegardée en base de données dans le champ `menuStyle` (enum: main, secondary)
```

### Scénario 2: Migration et structure de données pour menuStyle
```gherkin
Scénario: La base de données stocke le nouveau champ menuStyle
  Étant donné que l'entité Page a été modifiée pour inclure menuStyle
  Quand la migration Doctrine est générée et exécutée
  Alors la table `page` contient une colonne `menu_style` de type VARCHAR
  Et les valeurs possibles sont 'main' ou 'secondary'
  Et la valeur par défaut est 'main'
  Et toutes les pages existantes ont automatiquement la valeur 'main' après migration
```

### Scénario 3: Configuration globale de l'image de fond du menu
```gherkin
Scénario: Un administrateur peut configurer l'image de fond du menu burger
  Étant donné que je suis connecté en tant qu'administrateur
  Quand j'accède à la page de configuration du menu (/admin/menu-settings ou équivalent)
  Alors je vois un formulaire avec un champ d'upload "Image de fond du menu"
  Et je peux uploader une image (JPG, PNG, WebP, max 5MB)
  Et l'image est stockée dans le système de Media existant
  Et l'image est la même pour les versions FR et EN du site
  Et je vois un aperçu de l'image actuellement configurée
  Et je peux supprimer l'image pour revenir à un fond par défaut
```

### Scénario 4: Stockage de la configuration du menu
```gherkin
Scénario: La configuration du menu est persistée en base de données
  Étant donné que l'image de fond du menu a été uploadée
  Quand la configuration est sauvegardée
  Alors une entité Settings/MenuConfig stocke la référence vers l'image
  Et cette configuration est accessible globalement via un service ou Twig Extension
  Et l'image peut être récupérée dans les templates via une variable globale
```

### Scénario 5: Affichage du menu burger avec styles différenciés (desktop)
```gherkin
Scénario: Les liens principaux et secondaires ont un style visuel distinct
  Étant donné que je visite le site en desktop (largeur > 768px)
  Et que 2+ pages publiées existent avec différents menuStyle
  Quand je clique sur le bouton burger du menu
  Alors le menu s'ouvre avec l'image de fond configurée en arrière-plan
  Et les liens avec menuStyle='main' sont affichés avec le style Figma node-id=92-156
  Et les liens avec menuStyle='secondary' sont affichés avec le style Figma node-id=92-160
  Et la différence visuelle est claire (police, taille, couleur, etc.)
  Et les liens respectent l'ordre défini par le champ menuOrder
```

### Scénario 6: Comportement mobile du menu burger
```gherkin
Scénario: Le menu burger fonctionne correctement sur mobile
  Étant donné que je visite le site en mobile (largeur < 768px)
  Quand je clique sur l'icône burger (hamburger icon)
  Alors le menu s'ouvre en overlay plein écran
  Et l'image de fond du menu est visible
  Et les liens principaux et secondaires sont différenciés visuellement
  Et je peux fermer le menu en cliquant sur une croix (close icon)
  Et je peux fermer le menu en cliquant en dehors de celui-ci
  Et le scroll de la page est bloqué quand le menu est ouvert
```

### Scénario 7: Toggle JavaScript/TypeScript du menu burger
```gherkin
Scénario: L'interaction du menu burger est gérée en TypeScript
  Étant donné que le menu burger est affiché sur la page
  Quand je clique sur le bouton burger
  Alors une classe CSS 'menu-open' est ajoutée au body ou à l'élément menu
  Et l'animation d'ouverture suit les spécifications Figma
  Et le bouton burger se transforme en icône de fermeture (croix)
  Et un clic sur la croix retire la classe 'menu-open'
  Et un clic sur un backdrop/overlay retire la classe 'menu-open'
  Et les transitions sont fluides (CSS transitions)
  Et le code TypeScript respecte le mode strict et les path aliases configurés
```

### Scénario 8: Compatibilité bilangue du menu burger
```gherkin
Scénario: Le menu burger affiche les titres localisés selon la langue active
  Étant donné que je visite le site en français (/a-propos)
  Quand j'ouvre le menu burger
  Alors les titres des pages sont affichés en français (champ title)
  Et les liens pointent vers les slugs français
  Quand je change la langue vers l'anglais (/en/about)
  Et que j'ouvre le menu burger
  Alors les titres des pages sont affichés en anglais (champ titleEn avec fallback FR)
  Et les liens pointent vers les slugs anglais
```

### Scénario 9: Préservation du language switcher et lien admin
```gherkin
Scénario: Le menu burger conserve les fonctionnalités existantes
  Étant donné que je visite le site avec le menu burger ouvert
  Quand je consulte le menu
  Alors je vois le language switcher (FR/EN) dans le menu
  Et je vois le lien "Admin" (ou "Dashboard") si je suis authentifié
  Et je vois le lien "Admin" (login) si je ne suis pas authentifié
  Et tous ces éléments sont intégrés harmonieusement dans le design Figma
```

### Scénario 10: Gestion des cas limites
```gherkin
Scénario: Le menu burger gère correctement les cas limites
  Étant donné qu'aucune image de fond n'est configurée
  Quand j'ouvre le menu burger
  Alors un fond par défaut (couleur unie ou dégradé) est affiché

  Étant donné qu'une seule page publiée existe
  Quand je visite le site
  Alors le menu burger n'est pas affiché (comportement actuel préservé: menu_pages|length > 1)

  Étant donné que je suis en mode édition (?edit=1)
  Quand j'ouvre le menu burger
  Alors les liens pointent vers les routes d'édition (admin_edit_page, admin_edit_page_en)
  Et le comportement est identique au template actuel
```

### Scénario 11: Performance et optimisation des assets
```gherkin
Scénario: Les assets du menu burger sont optimisés
  Étant donné que le menu burger utilise des images et du JavaScript
  Quand la page est chargée
  Alors l'image de fond du menu est compressée et optimisée (WebP ou format moderne)
  Et le JavaScript TypeScript est compilé et minifié par Webpack Encore
  Et les styles SCSS sont compilés en CSS optimisé
  Et les fichiers sont servis depuis /build/ (Webpack output)
  Et le burger menu ne dégrade pas le temps de chargement initial de la page
```

### Scénario 12: Accessibilité du menu burger
```gherkin
Scénario: Le menu burger respecte les standards d'accessibilité
  Étant donné que je navigue au clavier ou avec un lecteur d'écran
  Quand je visite le site
  Alors le bouton burger a un attribut aria-label descriptif ("Ouvrir le menu" / "Open menu")
  Et l'état ouvert/fermé est indiqué via aria-expanded (true/false)
  Et je peux ouvrir et fermer le menu avec la touche Entrée ou Espace
  Et je peux naviguer entre les liens du menu avec Tab
  Et je peux fermer le menu avec la touche Échap
  Et le focus est correctement géré (piège de focus quand menu ouvert)
```

### Scénario 13: Tests unitaires et d'intégration
```gherkin
Scénario: Le nouveau système de menu est testé
  Étant donné que la feature est implémentée
  Quand je lance les tests
  Alors un test unitaire vérifie la validation de l'enum menuStyle (main, secondary)
  Et un test vérifie la migration par défaut (existing pages → menuStyle='main')
  Et un test d'intégration vérifie l'upload de l'image de fond du menu
  Et un test vérifie que AppExtension enrichit menu_pages avec le champ menuStyle
  Et un test vérifie le rendu du template avec différents menuStyle
  Et tous les tests passent sans erreur
```