FEATURE Refactor header nav behaviours

header.php

@@ -22,9 +22,10 @@
 		<header id="primary-header">
 
 			<?php get_template_part('template-parts/header/mobile-menu-brand'); ?>
-			<?php get_template_part('template-parts/header/secondary-menu'); ?>
+			<div class="menus-wrapper">
-			<?php get_template_part('template-parts/header/primary-menu'); ?>
+				<?php get_template_part('template-parts/header/secondary-menu'); ?>
-
+				<?php get_template_part('template-parts/header/primary-menu'); ?>
+			</div>
 
 			<?php get_template_part('template-parts/search-module'); ?>
 

resources/css/layout/menu-mobile-brand.css

@@ -6,7 +6,17 @@
   }
 
   #mobile-menu-toggle {
-    @apply underline underline-offset-4;
+    @apply underline underline-offset-4  flex gap-2 items-center;
+    &[aria-expanded] {
+      &::after {
+        @apply block w-4 h-4;
+        content: '';
+        background-image: url('../resources/img/close_menu_icon.svg');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
   }
   &__inner-elements {
     @apply flex justify-between items-center px-6 gap-12;
@@ -25,3 +35,35 @@
     }
   }
 }
+.secondary-menu-container {
+  @apply w-full;
+}
+
+body:has(.menu-mobile-brand) {
+  @screen lg {
+    /* @apply hidden; */
+  }
+}
+
+header.nav-open {
+  .secondary-menu-container,
+  .primary-menu-container,
+  #primary-menu {
+    @apply !block opacity-100;
+  }
+  .menus-wrapper {
+    @apply bg-primary;
+    min-height: calc(100vh - 100px);
+    @screen lg {
+      min-height: auto;
+    }
+  }
+
+  #primary-menu {
+    @apply w-full;
+
+    ul {
+      @apply mx-0;
+    }
+  }
+}

resources/css/layout/nav/header.css

@@ -24,7 +24,8 @@
   }
 
   body:has(header[nav-open='true']) {
-    overflow-y: hidden;
+    /* overflow-y: hidden; */
+    /* probleme sur mobile, on ne peut pas scroll en bas de la page */
     header {
       /* @apply min-h-screen; */
     }

resources/css/layout/nav/primary-menu.css

@@ -61,7 +61,7 @@
     li.menu-item {
       @apply font-medium 
 			text-lg
-			text-center;
+			lg:text-center;
 
       &:hover > button,
       &:hover > a,
@@ -141,12 +141,12 @@
       @apply bg-carhop-green-700 
 			p-6
       px-6
-
 			mx-auto
 			lg:mx-0
 			static
 			w-full
-      grid-cols-2
+      lg:grid-cols-2
+      grid-cols-1
       lg:absolute;
       z-index: 999;
       display: none;
@@ -183,9 +183,11 @@
         @apply max-w-3xl w-full lg:text-left;
         border-bottom: 1px solid #fff;
 
-        &:nth-last-child(-n + 2),
+        @screen lg {
-        &:last-child {
+          &:nth-last-child(-n + 2),
-          border-bottom: none;
+          &:last-child {
+            border-bottom: none;
+          }
         }
 
         &:nth-child(odd) {
@@ -258,14 +260,14 @@
       width: fit-content;
 
       > ul {
-        @apply max-w-xs
+        @apply lg:max-w-xs
 				mx-auto;
         /* min-height: 96vh; */
-        padding-top: 5vh;
+        padding-top: 2vh;
       }
       li.menu-item {
         @apply mt-0
-				text-center
+				lg:text-center
 				text-white
 				font-medium
 				py-8
@@ -273,6 +275,10 @@
         pb-2
 				lg:pb-0;
 
+        &:first-child {
+          @apply pt-0 lg:pt-6;
+        }
+
         .sub-menu li {
           @apply text-sm;
         }
@@ -282,8 +288,8 @@
 
   /* BURGER MENU */
   body:has(.nav-open) {
-    @apply max-h-screen
+    @apply max-h-screen;
-		overflow-hidden;
+    /* overflow-hidden; */
 
     /* #content,
 		footer,
@@ -355,9 +361,11 @@ li#menu-item-1836 {
   @apply border border-white relative;
   width: 100%;
 
-  grid-column: 1 / span 2;
+  @screen lg {
-  margin: 0 auto;
+    grid-column: 1 / span 2;
-  max-width: 98rem !important;
+    margin: 0 auto;
+    max-width: 98rem !important;
+  }
 
   &:after {
     transition: all 0.3s ease-out;

resources/css/layout/nav/secondary-menu.css

@@ -10,7 +10,7 @@
     @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
 
     > ul {
-      @apply flex flex-col lg:flex-row justify-between gap-4;
+      @apply flex flex-col lg:flex-row justify-between gap-4 w-full lg:w-auto;
     }
     a {
       @apply font-normal text-lg;
@@ -63,9 +63,10 @@
     }
   }
   .sub-menu {
-    @apply flex flex-col border border-white bg-primary  absolute top-10 left-0 z-30;
+    @apply flex flex-col lg:border border-white bg-primary  lg:absolute top-10 left-0 z-30;
-    width: 330px;
+    @screen lg {
-
+      width: 330px;
+    }
     li {
       @apply border-b border-white;
       a {

resources/js/header.js

@@ -1,63 +1,141 @@
-export default function menuInit() {
+/**
-  let main_navigation = document.querySelector('#primary-menu');
+ * Menu mobile + sous-menus du header (équivalent logique de header.ts côté dynamiques).
-  const header = document.querySelector('#primary-header');
+ */
-  const primary_menu = header.querySelector('#primary-menu');
+class HeaderMenu {
-  const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
+  constructor() {
-  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
+    this.header = document.querySelector('#primary-header');
+    this.primaryMenu = this.header?.querySelector('#primary-menu') ?? null;
+    this.mobileMenuToggle = this.header?.querySelector('#mobile-menu-toggle') ?? null;
+    this.menusWrapper = this.header?.querySelector('.menus-wrapper') ?? null;
+    this.submenuToggles = this.header
+      ? this.header.querySelectorAll('.menu-item__submenu-toggle')
+      : [];
 
-  function closeSubmenus(e) {
+    this.init();
-    submenuToggles.forEach((button) => {
+  }
-      button.setAttribute('aria-expanded', false);
+
-      button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
+  /**
+   * Vérifie les éléments nécessaires et attache les écouteurs.
+   */
+  init() {
+    if (!this.header || !this.mobileMenuToggle) {
+      console.warn('HeaderMenu : #primary-header ou #mobile-menu-toggle introuvable');
+      return;
+    }
+    this.bindEvents();
+  }
+
+  /**
+   * Lie tous les événements (toggle, focus, sous-menus, document).
+   */
+  bindEvents() {
+    this.mobileMenuToggle.addEventListener('click', (e) => this.handleToggleClick(e));
+
+    document.addEventListener('focusin', (e) => this.handleFocusOut(e), true);
+
+    this.submenuToggles.forEach((button) => {
+      button.addEventListener('click', (e) => this.handleSubmenuToggle(e, button));
+    });
+
+    document.addEventListener('click', (e) => this.handleDocumentClick(e));
+    document.addEventListener('keydown', (e) => this.handleDocumentKeydown(e));
+  }
+
+  isMenuOpen() {
+    return this.header?.classList.contains('nav-open') ?? false;
+  }
+
+  openMenu() {
+    if (!this.header || !this.mobileMenuToggle || this.isMenuOpen()) return;
+
+    this.header.classList.add('nav-open');
+    this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
+
+    this.mobileMenuToggle.textContent = 'Fermer';
+
+    if (typeof gsap !== 'undefined' && this.menusWrapper) {
+      gsap.from(this.menusWrapper, {
+        opacity: 20,
+        y: '-100vh',
+        duration: 0.5,
+        ease: Power4.easeOut,
+      });
+    }
+  }
+
+  closeMenu() {
+    if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
+
+    this.header.classList.remove('nav-open');
+    this.mobileMenuToggle.removeAttribute('aria-expanded');
+    this.mobileMenuToggle.textContent = 'Menu';
+  }
+
+  toggleMenu() {
+    if (this.isMenuOpen()) {
+      this.closeMenu();
+    } else {
+      this.openMenu();
+    }
+  }
+
+  closeAllSubmenus() {
+    this.submenuToggles.forEach((button) => {
+      button.setAttribute('aria-expanded', 'false');
+      const sub = button.parentElement?.querySelector('.sub-menu');
+      if (sub) sub.classList.remove('sub-menu-open');
     });
   }
 
-  // #### Open/close burger nav
+  handleToggleClick(e) {
-  // burgerMenuToggle.addEventListener('click', function (e) {
+    e.preventDefault();
-  //   e.preventDefault();
+    this.toggleMenu();
-  //   header.classList.toggle('nav-open');
+  }
-  //   burgerMenuToggle.toggleAttribute('aria-expanded');
-  //   gsap.from(primary_menu, {
-  //     opacity: 20,
-  //     y: '-100vh',
-  //     duration: 0.5,
-  //     ease: Power4.easeOut,
-  //   });
-  // });
 
-  // // #### Close nav when reaching the end of the menu with tab
+  /**
-  // document.addEventListener(
+   * Tab / focus hors du header : ferme la nav et renvoie le focus sur le bouton.
-  //   'focusin',
+   */
-  //   (e) => {
+  handleFocusOut(e) {
-  //     const header = document.querySelector('#primary-header');
+    if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
-  //     if (
-  //       header.classList.contains('nav-open') &&
-  //       !header.contains(document.activeElement)
-  //     ) {
-  //       header.classList.remove('nav-open');
-  //       burgerMenuToggle.setAttribute('aria-expanded', false);
 
-  //       burgerMenuToggle.focus();
+    const target = e.target;
-  //     }
+    if (!(target instanceof Node)) return;
-  //   },
+    if (this.header.contains(target)) return;
-  //   true
-  // );
 
-  submenuToggles.forEach((button) => {
+    this.closeMenu();
-    button.addEventListener('click', function (e) {
+    this.closeAllSubmenus();
-      let isExpanded = button.getAttribute('aria-expanded') === 'true';
+    this.mobileMenuToggle.focus();
+  }
 
-      closeSubmenus(e);
+  /**
-      if (!isExpanded) {
+   * Clic en dehors du header : ferme uniquement les sous-menus (comportement actuel).
-        button.setAttribute('aria-expanded', true);
+   */
-        button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
+  handleDocumentClick(e) {
-      }
+    const target = e.target;
-    });
+    if (!(target instanceof Node) || !this.header) return;
-  });
+    if (this.header.contains(target)) return;
+    this.closeAllSubmenus();
+  }
 
-  document.addEventListener('keydown', function (e) {
+  handleDocumentKeydown(e) {
     if (e.key === 'Escape') {
-      closeSubmenus(e);
+      this.closeAllSubmenus();
     }
-  });
+  }
+
+  /**
+   * Accordéon : un seul sous-menu ouvert à la fois.
+   */
+  handleSubmenuToggle(e, button) {
+    const isExpanded = button.getAttribute('aria-expanded') === 'true';
+    this.closeAllSubmenus();
+    if (!isExpanded) {
+      button.setAttribute('aria-expanded', 'true');
+      button.parentElement?.querySelector('.sub-menu')?.classList.add('sub-menu-open');
+    }
+  }
+}
+
+export default function menuInit() {
+  return new HeaderMenu();
 }

template-parts/header/mobile-menu-brand.php

@@ -1,7 +1,7 @@
 <?php
 ?>
 <div class="carhop-mobile-menu-brand menu-mobile-brand" id="menu-mobile-brand">
-	<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="Menu" data-text-close="Fermer" aria-expanded="true">
+	<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="Menu" data-text-close="Fermer">
 		<span class="text-content">Menu</span>
 	</button>
 	<div class="menu-mobile-brand__inner-elements">