# CHANGELOG — Module Navigation Mobile

## [1.2.0] — 2026-04-21 — Drawer top:62px + fix liens parents avec `href="#"`

### Modifié — Drawer positionné à `top: 62px`
- Avant : le drawer commençait à `top: 0` et couvrait 100% de la hauteur viewport (y compris le header fixe du thème).
- Après : le drawer démarre à **62px du haut** → laisse le header visible (logo, burger trigger Enfold, CTA header).
- Valeur hard-codée à 62px (hauteur header Enfold standard). Ajustable dans [`assets/css/nav-mobile.css`](../../../assets/css/nav-mobile.css) section `.nxt-nav-drawer`.
- Note : l'overlay reste plein écran (top: 0) pour dimer correctement toute la page.

### Corrigé — Liens parents `href="#"` fermaient le drawer
- **Symptôme** : les items de menu WordPress configurés en « Custom Link » avec URL `#` et libellé éditorial (ex: `Infos (#)` regroupant `Contact` + `À propos`) faisaient **sortir du drawer mobile** vers la HP (ou ajoutaient `#` à l'URL courante) au lieu de simplement déplier/replier le sous-menu.
- **Cause** : deux handlers JS distincts traitaient les clics :
  1. Un handler délégué sur le drawer → si l'item a `menu-item-has-children`, test de « zone chevron » (50px à droite). Sinon → `closeDrawer()`.
  2. Un handler spécifique attaché à chaque `<a>` parent avec `href="#"` → `preventDefault()` + toggle accordéon.
  
  Les deux s'exécutaient : le 2e preventDefault bloquait la navigation, mais le 1er continuait jusqu'à `closeDrawer()` → drawer refermé, utilisateur perdu.
- **Fix** : **unification en un seul handler** avec 3 branches explicites :
  - **(a)** Parent avec enfants + `href="#"` ou vide → `preventDefault()` + toggle accordéon, **pas de `closeDrawer()`** (reste dans le drawer).
  - **(b)** Parent avec enfants + URL réelle → détection zone chevron conservée (toggle si clic droit, navigation si clic sur le libellé).
  - **(c)** Lien terminal (sans enfants) → navigation normale + `closeDrawer()`.
- Conséquence : l'utilisateur peut maintenant créer des menus « regroupés » façon WordPress standard sans casser l'expérience mobile.

---

## [1.1.0] — 2026-04-21 — Fix : placeholders mega-menu Enfold en mobile

### Corrigé — Items fantômes « – » orphelins en drawer mobile
- **Symptôme** : certains items de menu apparaissent en mobile avec juste un tiret `–` (ou `—`) au lieu d'un libellé réel, avec un chevron qui ouvre/ferme un sous-niveau. Impossibilité pour l'utilisateur de comprendre où il navigue.
- **Cause** : pattern Enfold des **mega-menus desktop multi-colonnes**. Enfold permet de structurer des mega-menus en insérant des items WordPress « custom » avec URL `#` et libellé placeholder (ex: `–`). En desktop, le JS Enfold les masque visuellement et réarrange les colonnes. Notre drawer mobile, lui, rendait ce pattern brutalement → tirets orphelins.
- **Fix** : nouveau filtre `wp_nav_menu_objects` (ciblé **uniquement** sur `menu_id=nxt-nav-menu`, zéro impact sur les autres menus WP) qui :
  - **Détecte** les items placeholders (`object=custom` + `url=#` ou vide + `title` uniquement composé de caractères de séparation : `–`, `—`, `|`, `·`, `•`…).
  - **Supprime** ces items du rendu mobile.
  - **Remonte d'un cran** la hiérarchie des enfants directs (leur parent devient le parent du placeholder).
  - **Gère les chaînes** de placeholders imbriqués (garde-fou anti-boucle).
  - **Recalcule** les classes `menu-item-has-children` pour éviter les chevrons fantômes CSS.
- **Aucune modification côté WordPress admin** : le menu configuré par l'éditeur reste inchangé — seul le rendu mobile filtre ces items techniques.

### Exemple
Avant :
```
Nos solutions VRD pour particuliers
├─ –  (chevron)
│  └─ Aménagements de cours & allées
└─ –  (chevron)
   ├─ Raccordements & viabilisation
   └─ Aménagements de loisirs & maçonnerie
```
Après :
```
Nos solutions VRD pour particuliers
├─ Aménagements de cours & allées
├─ Raccordements & viabilisation
└─ Aménagements de loisirs & maçonnerie
```

---

## [1.0.0] — 2026-04-16

### Ajouté
Version initiale du module — drawer latéral mobile qui remplace le menu burger natif d'Enfold.

**Neutralisation d'Enfold (automatique)** — se fait via 3 hooks PHP au boot du module (pas besoin de toucher au `functions.php` enfant) :
- `remove_filter('wp_nav_menu_items', 'avia_append_burger_menu', 9998)` — retire le `<li class="av-burger-menu-main">` du menu principal
- `remove_filter('avf_fallback_menu_items', 'avia_append_burger_menu', 9998)` — idem sur le menu fallback
- `add_filter('avf_burger_menu_active', '__return_false')` — force Enfold en mode « text menu » (plus de classes `html_burger_menu_active`)
- `add_filter('avf_alternate_mobile_menu', '__return_empty_string')` — vide l'éventuel menu alternatif mobile

**Résultat côté HTML** : un seul menu dans le DOM (le main_menu Enfold gardé pour desktop via CSS) — **zéro impact SEO négatif**, pas de contenu dupliqué.

**Trigger** :
- Switch admin entre « Dans le header » (injecté à droite du logo via JS) et « Flottant » (bouton fixe haut-droite avec glassmorphism).
- Animation burger → croix à l'ouverture.

**Drawer** :
- Latéral droite (320px / 400px≥500px), full-height, glassmorphism (`backdrop-filter: blur(14px)`).
- Glissement depuis la droite via `transform: translateX(100%)` → `translateX(0)` (easing Material).
- Overlay dim semi-transparent avec `backdrop-filter: blur(2px)`.
- Fermeture : clic overlay, bouton ×, touche Escape, **swipe right-to-left > 60px**.
- Lock du scroll du body pendant l'ouverture.
- Focus return sur le trigger à la fermeture (a11y).

**Menu** :
- Source primaire : emplacement `nxt_mobile_menu` (à déclarer dans Apparence > Menus).
- **Fallback automatique** sur l'emplacement `avia` (menu principal Enfold) si `nxt_mobile_menu` non assigné → zéro friction à l'install.
- Accordéon inline pour les sous-menus (1 parent ouvert à la fois).
- Profondeur max **3 niveaux** (garde-fou).
- Chevrons rotatifs (45° → -135°) pour indicateur visuel.
- Clic sur chevron (zone droite ~50px du lien) = toggle. Clic sur le reste du lien = navigation + fermeture du drawer.
- Parents avec `href="#"` ou vide : clic = toggle accordéon (pas de navigation).

**Bloc contact optionnel** (footer du drawer) :
- Affiche téléphone + email depuis `Nexxis_Module_Contact_Info` (gracieux si le module est désactivé).
- Configurable via toggle admin.

**Breakpoint** : visible uniquement `≤ 1024px` — invisible en desktop (le menu principal Enfold prend le relais).

**A11y** :
- `aria-expanded` sync sur le trigger
- `aria-hidden` sync sur le drawer
- `aria-modal="true"` + `role="dialog"`
- Focus trap basique (focus sur × à l'ouverture, return sur trigger à la fermeture)
- Escape pour fermer
- Respect de `prefers-reduced-motion`

**Desktop switch** : fermeture automatique du drawer si l'utilisateur passe en desktop (resize / orientation).

### Configuration
Options admin (dans Apparence > ⚡ Nexxis Toolkit > Navigation Mobile) :
| Option | Valeurs | Défaut |
|---|---|---|
| Position du bouton | `header` / `floating` | `header` |
| Afficher le bloc contact | on / off | on |
| Titre du drawer | texte libre | `Navigation` |

### Activation par défaut
`default_on: false` — cohérent avec la convention des autres modules. L'administrateur doit l'activer explicitement depuis le dashboard Toolkit.

### Dépendances
- Aucune dépendance dure. ACF non requis.
- Module `Contact Info` recommandé pour le bloc footer (mais optionnel).

### Bugs connus corrigés post-livraison
- **Icône enveloppe collée au texte dans le bloc contact** — résolu en passant de `gap: 12px` (flex) à `margin-right: 12px` sur le SVG directement + `width/height: 18px` explicites + `flex: 1 + min-width: 0 + word-break: break-word` sur le span.
