From 995df4f4d41d425ebea5a1adb027c7969e2689c6 Mon Sep 17 00:00:00 2001
From: denisahearn <denisahearn@yahoo.com>
Date: Thu, 19 Dec 2024 13:11:05 -0600
Subject: [PATCH] Changed search-filter to search

---
 .../layouts/assets/_sass/_sidebar.scss        |  2 +-
 lib/graphql-docs/layouts/default.html         | 29 ++++++++++---------
 .../layouts/includes/sidebar.html             |  4 +--
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss b/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
index 9d82a36..60bc87f 100644
--- a/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
+++ b/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
@@ -69,7 +69,7 @@
       }
     }
   }
-  #search-filter {
+  #search {
     display: flex;
     position: relative;
     align-items: center;
diff --git a/lib/graphql-docs/layouts/default.html b/lib/graphql-docs/layouts/default.html
index 2b3e964..6785bc0 100644
--- a/lib/graphql-docs/layouts/default.html
+++ b/lib/graphql-docs/layouts/default.html
@@ -20,15 +20,19 @@
 
       // Add listener for search filter input
       const sidebarDiv = document.getElementById('sidebar');
-      const searchFilterDiv = sidebarDiv.querySelector('#search-filter')
-      const searchFilterInput = searchFilterDiv.querySelector('input');
+      const searchDiv = sidebarDiv.querySelector('#search')
 
-      const listener = debounce((event) => {
-        const searchValue = event.target.value;
-        applySearchFilter(sidebarDiv, searchValue)
-      }, 500);
+      if (searchDiv) {
+        const searchInput = searchDiv.querySelector('input');
+        const menuElements = sidebarDiv.querySelectorAll('ul.menu-root');
 
-      searchFilterInput.addEventListener('input', listener);
+        const listener = debounce((event) => {
+          const searchValue = event.target.value;
+          applySearchFilter(searchValue, menuElements)
+        }, 500);
+
+        searchInput.addEventListener('input', listener);
+      }
     });
 
     function debounce(func, wait) {
@@ -45,10 +49,9 @@
       };
     }
 
-    function applySearchFilter(sidebarDiv, searchValue) {
-      const menuRootElements = sidebarDiv.querySelectorAll('ul.menu-root');
-      menuRootElements.forEach(menuRootElement => {
-        const listElements = menuRootElement.getElementsByTagName('li');
+    function applySearchFilter(searchValue, menuElements) {
+      menuElements.forEach(menuElement => {
+        const listElements = menuElement.getElementsByTagName('li');
         let hasVisibleElements = false;
         Array.from(listElements).forEach(listElement => {
           let contains = true
@@ -67,8 +70,8 @@
         });
 
         // Hide the entire menu if none of the list items are visible
-        const parentElement = menuRootElement.closest('li')
-        parentElement.style.display = hasVisibleElements ? '' : 'none';
+        const menuParentElement = menuElement.closest('li')
+        menuParentElement.style.display = hasVisibleElements ? '' : 'none';
       });
     }
     </script>
diff --git a/lib/graphql-docs/layouts/includes/sidebar.html b/lib/graphql-docs/layouts/includes/sidebar.html
index a8979e7..6f7c2be 100644
--- a/lib/graphql-docs/layouts/includes/sidebar.html
+++ b/lib/graphql-docs/layouts/includes/sidebar.html
@@ -1,5 +1,5 @@
-<div id="search-filter">
-  <img src="assets/images/search.svg">
+<div id="search">
+  <img src="<%= base_url %>/assets/images/search.svg">
   <input autocomplete="off" placeholder="Search" />
 </div>
 <ul class="categories">