header.php

@@ -22,10 +22,9 @@
 		<header id="primary-header">
 
 			<?php get_template_part('template-parts/header/mobile-menu-brand'); ?>
-			<div class="menus-wrapper">
 			<?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,17 +6,7 @@
   }
 
   #mobile-menu-toggle {
-    @apply underline underline-offset-4  flex gap-2 items-center;
+    @apply underline underline-offset-4;
-    &[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;
@@ -35,35 +25,3 @@
     }
   }
 }
-.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,8 +24,7 @@
   }
 
   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
-			lg:text-center;
+			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
-      lg:grid-cols-2
+      grid-cols-2
-      grid-cols-1
       lg:absolute;
       z-index: 999;
       display: none;
@@ -183,12 +183,10 @@
         @apply max-w-3xl w-full lg:text-left;
         border-bottom: 1px solid #fff;
 
-        @screen lg {
         &:nth-last-child(-n + 2),
         &:last-child {
           border-bottom: none;
         }
-        }
 
         &:nth-child(odd) {
           @apply ml-auto;
@@ -260,14 +258,14 @@
       width: fit-content;
 
       > ul {
-        @apply lg:max-w-xs
+        @apply max-w-xs
 				mx-auto;
         /* min-height: 96vh; */
-        padding-top: 2vh;
+        padding-top: 5vh;
       }
       li.menu-item {
         @apply mt-0
-				lg:text-center
+				text-center
 				text-white
 				font-medium
 				py-8
@@ -275,10 +273,6 @@
         pb-2
 				lg:pb-0;
 
-        &:first-child {
-          @apply pt-0 lg:pt-6;
-        }
-
         .sub-menu li {
           @apply text-sm;
         }
@@ -288,8 +282,8 @@
 
   /* BURGER MENU */
   body:has(.nav-open) {
-    @apply max-h-screen;
+    @apply max-h-screen
-    /* overflow-hidden; */
+		overflow-hidden;
 
     /* #content,
 		footer,
@@ -361,11 +355,9 @@ li#menu-item-1836 {
   @apply border border-white relative;
   width: 100%;
 
-  @screen lg {
   grid-column: 1 / span 2;
   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 w-full lg:w-auto;
+      @apply flex flex-col lg:flex-row justify-between gap-4;
     }
     a {
       @apply font-normal text-lg;
@@ -63,10 +63,9 @@
     }
   }
   .sub-menu {
-    @apply flex flex-col lg:border border-white bg-primary  lg:absolute top-10 left-0 z-30;
+    @apply flex flex-col border border-white bg-primary  absolute top-10 left-0 z-30;
-    @screen lg {
     width: 330px;
-    }
+
     li {
       @apply border-b border-white;
       a {

resources/js/header.js

@@ -1,141 +1,63 @@
-/**
- * Menu mobile + sous-menus du header (équivalent logique de header.ts côté dynamiques).
- */
-class HeaderMenu {
-  constructor() {
-    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')
-      : [];
-
-    this.init();
-  }
-
-  /**
-   * 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');
-    });
-  }
-
-  handleToggleClick(e) {
-    e.preventDefault();
-    this.toggleMenu();
-  }
-
-  /**
-   * Tab / focus hors du header : ferme la nav et renvoie le focus sur le bouton.
-   */
-  handleFocusOut(e) {
-    if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
-
-    const target = e.target;
-    if (!(target instanceof Node)) return;
-    if (this.header.contains(target)) return;
-
-    this.closeMenu();
-    this.closeAllSubmenus();
-    this.mobileMenuToggle.focus();
-  }
-
-  /**
-   * Clic en dehors du header : ferme uniquement les sous-menus (comportement actuel).
-   */
-  handleDocumentClick(e) {
-    const target = e.target;
-    if (!(target instanceof Node) || !this.header) return;
-    if (this.header.contains(target)) return;
-    this.closeAllSubmenus();
-  }
-
-  handleDocumentKeydown(e) {
-    if (e.key === 'Escape') {
-      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();
+  let main_navigation = document.querySelector('#primary-menu');
+  const header = document.querySelector('#primary-header');
+  const primary_menu = header.querySelector('#primary-menu');
+  const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
+  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
+
+  function closeSubmenus(e) {
+    submenuToggles.forEach((button) => {
+      button.setAttribute('aria-expanded', false);
+      button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
+    });
+  }
+
+  // #### Open/close burger nav
+  // burgerMenuToggle.addEventListener('click', function (e) {
+  //   e.preventDefault();
+  //   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(
+  //   'focusin',
+  //   (e) => {
+  //     const header = document.querySelector('#primary-header');
+  //     if (
+  //       header.classList.contains('nav-open') &&
+  //       !header.contains(document.activeElement)
+  //     ) {
+  //       header.classList.remove('nav-open');
+  //       burgerMenuToggle.setAttribute('aria-expanded', false);
+
+  //       burgerMenuToggle.focus();
+  //     }
+  //   },
+  //   true
+  // );
+
+  submenuToggles.forEach((button) => {
+    button.addEventListener('click', function (e) {
+      let isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+      closeSubmenus(e);
+      if (!isExpanded) {
+        button.setAttribute('aria-expanded', true);
+        button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
+      }
+    });
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      closeSubmenus(e);
+    }
+  });
 }

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">
+	<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">
 		<span class="text-content">Menu</span>
 	</button>
 	<div class="menu-mobile-brand__inner-elements">