From 4823dd63780a0cd224a116b2af98853ce0a9e37d Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 27 May 2024 12:18:00 +0200
Subject: [PATCH] first menu fix for mobile/desktop

---
 header.php                                    |  3 ++
 resources/css/layout/header.css               |  1 +
 resources/js/menus.js                         | 31 ++++++++++---------
 .../header/menu-renovateur.php                |  5 +--
 template-components/header/mobile-brand.php   |  5 +--
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/header.php b/header.php
index f6caef7..551cc25 100644
--- a/header.php
+++ b/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'); ?>
diff --git a/resources/css/layout/header.css b/resources/css/layout/header.css
index 2a641e7..bbe157b 100644
--- a/resources/css/layout/header.css
+++ b/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;
 }
diff --git a/resources/js/menus.js b/resources/js/menus.js
index 146d00a..cd4c062 100644
--- a/resources/js/menus.js
+++ b/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,19 +196,21 @@ export default function menuInit() {
   }
   function handleSearchOpening() {
     // SEARCH TOGGLE open/close
-    searchModuleToggle.addEventListener('click', function (e) {
-      closeSubmenus();
+    searchModuleToggles.forEach((searchModuleToggle) => {
+      searchModuleToggle.addEventListener('click', function (e) {
+        closeSubmenus();
 
-      // SEARCH IS CLOSED --> OPEN IT
-      if (isSearchOpen() === false) {
-        openSearch();
-        return;
-      }
+        // SEARCH IS CLOSED --> OPEN IT
+        if (isSearchOpen() === false) {
+          openSearch(searchModuleToggle);
+          return;
+        }
 
-      // SEARCH IS OPEN --> CLOSE IT
-      if (isSearchOpen() === true) {
-        closeSearch();
-      }
+        // SEARCH IS OPEN --> CLOSE IT
+        if (isSearchOpen() === true) {
+          closeSearch(searchModuleToggle);
+        }
+      });
     });
   }
 
diff --git a/template-components/header/menu-renovateur.php b/template-components/header/menu-renovateur.php
index eef6f56..efcb957 100644
--- a/template-components/header/menu-renovateur.php
+++ b/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>
\ No newline at end of file
diff --git a/template-components/header/mobile-brand.php b/template-components/header/mobile-brand.php
index 4333096..94ad435 100644
--- a/template-components/header/mobile-brand.php
+++ b/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>
\ No newline at end of file