first menu fix for mobile/desktop

header.php

@@ -40,6 +40,9 @@
 			<!-- MENU HOMEGRADE -->
 			<?php get_template_part('template-components/header/menu-homegrade'); ?>
 			<?php get_template_part('template-components/header/menu-renovateur'); ?>
+
+			<!-- SEARCH MODULE -->
+			<?php get_template_part('template-components/header/search-module'); ?>
 		</header>
 
 		<?php do_action('tailpress_content_start'); ?>

resources/css/layout/header.css

@@ -12,6 +12,7 @@ body:has(header .menu-renovateur .sub-menu--open) {
 
 header#main-header {
   @apply flex 
+  relative
 	flex-col-reverse
 	lg:flex-col;
 }

resources/js/menus.js

@@ -5,7 +5,8 @@ export default function menuInit() {
 
   // Search module
   const searchModule = header.querySelector('.search-module');
-  const searchModuleToggle = header.querySelector('#search-module-toggle');
+  // const searchModuleToggle = header.querySelector('#search-module-toggle');
+  const searchModuleToggles = header.querySelectorAll('#search-module-toggle');
 
   // Mobile Menu
   const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
@@ -162,7 +163,7 @@ export default function menuInit() {
     // IF TRANSITIONNING OR PROBLEM
     return null;
   }
-  function openSearch() {
+  function openSearch(searchModuleToggle) {
     const searchFieldInput = header.querySelector('.search-module__search-form__input');
     searchModuleToggle.setAttribute('aria-expanded', 'true');
     searchModule.setAttribute('mobile-opened', '');
@@ -172,7 +173,7 @@ export default function menuInit() {
       searchModule.removeAttribute('aria-hidden');
     }, 400);
   }
-  function closeSearch() {
+  function closeSearch(searchModuleToggle) {
     searchModuleToggle.setAttribute('aria-expanded', 'false');
     searchModuleToggle.focus();
     searchModule.setAttribute('aria-hidden', '');
@@ -195,20 +196,22 @@ export default function menuInit() {
   }
   function handleSearchOpening() {
     // SEARCH TOGGLE open/close
+    searchModuleToggles.forEach((searchModuleToggle) => {
       searchModuleToggle.addEventListener('click', function (e) {
         closeSubmenus();
 
         // SEARCH IS CLOSED --> OPEN IT
         if (isSearchOpen() === false) {
-        openSearch();
+          openSearch(searchModuleToggle);
           return;
         }
 
         // SEARCH IS OPEN --> CLOSE IT
         if (isSearchOpen() === true) {
-        closeSearch();
+          closeSearch(searchModuleToggle);
         }
       });
+    });
   }
 
   handleSearchOpening();

template-components/header/menu-renovateur.php

@@ -213,7 +213,8 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
 			</button>
 		</div>
 
-		<!-- SEARCH MODULE -->
-		<?php get_template_part('template-components/header/search-module'); ?>
+		<?php
+		//  get_template_part('template-components/header/search-module');
+		?>
 	</div>
 </div>

template-components/header/mobile-brand.php

@@ -33,6 +33,7 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
 		</button>
 	</div>
 
-	<!-- SEARCH MODULE -->
-	<?php get_template_part('template-components/header/search-module'); ?>
+	<?php
+	// get_template_part('template-components/header/search-module');
+	?>
 </nav>