From 83f209ca8c5939428c223f3600269cb34b706ede Mon Sep 17 00:00:00 2001
From: denisahearn <denisahearn@yahoo.com>
Date: Thu, 19 Dec 2024 11:09:34 -0600
Subject: [PATCH 1/2] Add search filter to sidebar

---
 CONTRIBUTING.md                               |  2 +-
 .../layouts/assets/_sass/_sidebar.scss        | 32 +++++++++++
 .../layouts/assets/images/search.svg          |  3 ++
 lib/graphql-docs/layouts/default.html         | 54 ++++++++++++++++++-
 .../layouts/includes/sidebar.html             |  4 ++
 5 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 lib/graphql-docs/layouts/assets/images/search.svg

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3a436d70..49124e0b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contribuing Guide
+# Contributing Guide
 
 Contributions to this project are welcome. If you have an idea for a bigger change, [open an issue first](https://github.com/brettchalupa/graphql-docs/issues/new/choose) and we can discuss it.
 
diff --git a/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss b/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
index 5afe1b45..9d82a365 100644
--- a/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
+++ b/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
@@ -69,6 +69,38 @@
       }
     }
   }
+  #search-filter {
+    display: flex;
+    position: relative;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 0.01em 16px;
+    margin-bottom: 20px;
+
+    img {
+      position: absolute;
+      left: 10px;
+      height: 16px;
+      width: 16px;
+    }
+
+    input {
+      height: 24px;
+      line-height: 1.5;
+      width: 100%;
+      padding-left: 15px;
+      background-color: transparent;
+      color: #444;
+      border: none;
+      font-size: 14px;
+      font-family: 'ProximaNova-Semibold';
+    }
+
+    input:focus {
+      outline: none;
+    }
+  }
 }
 
 #sidebar-mobile {
diff --git a/lib/graphql-docs/layouts/assets/images/search.svg b/lib/graphql-docs/layouts/assets/images/search.svg
new file mode 100644
index 00000000..eee8ff56
--- /dev/null
+++ b/lib/graphql-docs/layouts/assets/images/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" />
+</svg>
diff --git a/lib/graphql-docs/layouts/default.html b/lib/graphql-docs/layouts/default.html
index 00ee54ff..2b3e964a 100644
--- a/lib/graphql-docs/layouts/default.html
+++ b/lib/graphql-docs/layouts/default.html
@@ -9,16 +9,68 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.2/anchor.min.js"></script>
     <script>
 
-    // Add anchors on DOMContentLoaded
     document.addEventListener("DOMContentLoaded", function(event) {
+      // Add anchors
       anchors.options = {
         placement: 'left',
         visible: 'hover',
         icon: '¶'
       };
       anchors.add('h2, h3, h4, h5, h6, .anchored');
+
+      // Add listener for search filter input
+      const sidebarDiv = document.getElementById('sidebar');
+      const searchFilterDiv = sidebarDiv.querySelector('#search-filter')
+      const searchFilterInput = searchFilterDiv.querySelector('input');
+
+      const listener = debounce((event) => {
+        const searchValue = event.target.value;
+        applySearchFilter(sidebarDiv, searchValue)
+      }, 500);
+
+      searchFilterInput.addEventListener('input', listener);
     });
 
+    function debounce(func, wait) {
+      let timeout;
+
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func(...args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    }
+
+    function applySearchFilter(sidebarDiv, searchValue) {
+      const menuRootElements = sidebarDiv.querySelectorAll('ul.menu-root');
+      menuRootElements.forEach(menuRootElement => {
+        const listElements = menuRootElement.getElementsByTagName('li');
+        let hasVisibleElements = false;
+        Array.from(listElements).forEach(listElement => {
+          let contains = true
+          if (searchValue.length > 0) {
+            const anchorElement = listElement.querySelector('a');
+            const textContent = anchorElement.innerText;
+            contains = textContent.toLowerCase().includes(searchValue.toLowerCase());
+          }
+
+          // Hide the list element if its text does not contain the search value
+          listElement.style.display = contains ? '' : 'none';
+
+          if (contains) {
+            hasVisibleElements = true;
+          }
+        });
+
+        // Hide the entire menu if none of the list items are visible
+        const parentElement = menuRootElement.closest('li')
+        parentElement.style.display = hasVisibleElements ? '' : 'none';
+      });
+    }
     </script>
   </head>
   <body>
diff --git a/lib/graphql-docs/layouts/includes/sidebar.html b/lib/graphql-docs/layouts/includes/sidebar.html
index 23d67808..a8979e7e 100644
--- a/lib/graphql-docs/layouts/includes/sidebar.html
+++ b/lib/graphql-docs/layouts/includes/sidebar.html
@@ -1,3 +1,7 @@
+<div id="search-filter">
+  <img src="assets/images/search.svg">
+  <input autocomplete="off" placeholder="Search" />
+</div>
 <ul class="categories">
   <li>
     <ul class="menu-root">

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 2/2] 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 9d82a365..60bc87f0 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 2b3e964a..6785bc07 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 a8979e7e..6f7c2be6 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">