Fixed header issues

hlxsites · Oct 17, 2023 · b91d847 · b91d847
1 parent 5cce32c
commit b91d847
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,5 +1,7 @@
 import { getMetadata } from '../../scripts/aem.js';
 
+const windowWidth = document.body.offsetWidth;
+
 function createGcseTools() {
   const gcseTools = document.createElement('div');
   gcseTools.id = 'mmg-gcse-tools';
@@ -60,7 +62,16 @@ function createResultLink(result) {
   return link;
 }
 
+function removeSearchResult() {
+  const searchResultsBlock1 = document.getElementById('mmg-gcse');
+  if (searchResultsBlock1) {
+    searchResultsBlock1.remove();
+  }
+}
+
 function createSearchResultsBlock(results, input, total) {
+  // Remove the main search results container if any
+  removeSearchResult();
   // Create the main search results container
   const searchResultsBlock = document.createElement('div');
   searchResultsBlock.id = 'mmg-gcse';
@@ -114,6 +125,21 @@ function addClassesToMenuItems(element, depth) {
     const childElement = item.querySelector('ul');
 
     if (childElement?.children?.length > 0) {
+      const spanElement = document.createElement('span');
+      spanElement.className = 'arrow';
+      if (windowWidth < 961) {
+        childElement.style.display = 'none';
+        spanElement.addEventListener('click', () => {
+          if (childElement.style.display === 'block' || childElement.style.display === '') {
+            childElement.style.display = 'none';
+            item.classList.remove('open');
+          } else {
+            childElement.style.display = 'block';
+            item.classList.add('open');
+          }
+        });
+      }
+      item.prepend(spanElement);
       const nextDepth = depth + 1;
       addClassesToMenuItems(childElement, nextDepth);
     }
@@ -137,14 +163,16 @@ function handleSearchFormSubmit(formElement) {
         if (resultBlock) {
           resultBlock.remove();
         }
-        if (results.length > 0 && inputValue !== '') {
+        if (inputValue !== '') {
           // Create a block based on the search results
           const searchResultsBlock = createSearchResultsBlock(
             results,
             inputValue,
             jsonData.total,
           );
           document.body.appendChild(searchResultsBlock);
+        } else {
+          removeSearchResult();
         }
       });
   }
@@ -228,11 +256,12 @@ export default async function decorate(block) {
 
     // // Add event listener to input element
     spanElement.addEventListener('click', () => {
-      customSearchDiv.classList.toggle('active');
       if (inputElement.style.display === 'none') {
         inputElement.style.display = 'inline-block';
-      } else {
+        customSearchDiv.classList.add('active');
+      } else if (inputElement.value === '') {
         inputElement.style.display = 'none';
+        customSearchDiv.classList.remove('active');
       }
     });
 
@@ -255,17 +284,21 @@ export default async function decorate(block) {
     const mobileForm = clonedCustomSearchDiv.querySelector('form');
 
     mobileSpan.addEventListener('click', () => {
-      clonedCustomSearchDiv.classList.toggle('active');
       if (mobileInput.style.display === 'none') {
         mobileInput.style.display = 'inline-block';
-      } else {
+        clonedCustomSearchDiv.classList.add('active');
+      } else if (mobileInput.value === '') {
         mobileInput.style.display = 'none';
+        clonedCustomSearchDiv.classList.remove('active');
       }
     });
 
     mobileForm.addEventListener('submit', handleSearchFormSubmit(mobileForm));
     formElement.addEventListener('submit', handleSearchFormSubmit(formElement));
 
+    mobileInput.addEventListener('input', handleSearchFormSubmit(mobileForm));
+    inputElement.addEventListener('input', handleSearchFormSubmit(formElement));
+
     const listElements = document.createElement('div');
 
     listElements.innerHTML = childElements.children[1].innerHTML;

diff --git a/styles/responsive.css b/styles/responsive.css
@@ -370,6 +370,13 @@
         width: 33.3%
     }
 
+    #header-info a.news {
+        font-weight: bold;
+        color: #fff;
+        margin-left: 0;
+        padding: 13px 15px !important;
+    }
+
     #header-info a.careers,
     #header-info a.news {
         border-left: 1px solid #f1f1f1

diff --git a/styles/template.css b/styles/template.css
@@ -86,6 +86,14 @@ body {
     color: #e46b29
 }
 
+#header-info a.news {
+    font-weight: bold;
+    color: #FFF !important;
+    background-color: #e46b29;
+    padding: 3px 7px !important;
+    margin-left: 5px;
+}
+
 #menu {
     border-top: 1px solid #f4f4f4;
     bottom: 0;