Sidebar Search Filter

denisahearn · web-flow · commit 482f9cd14d41 · 2025-02-09T14:06:14.000-05:00
allows users to filter content in the sidebar
diff --git 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
@@ -69,6 +69,38 @@
       }
     }
   }
+  #search {
+    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
@@ -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
@@ -9,16 +9,71 @@
     <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 searchDiv = sidebarDiv.querySelector('#search')
+
+      if (searchDiv) {
+        const searchInput = searchDiv.querySelector('input');
+        const menuElements = sidebarDiv.querySelectorAll('ul.menu-root');
+
+        const listener = debounce((event) => {
+          const searchValue = event.target.value;
+          applySearchFilter(searchValue, menuElements)
+        }, 500);
+
+        searchInput.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(searchValue, menuElements) {
+      menuElements.forEach(menuElement => {
+        const listElements = menuElement.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 menuParentElement = menuElement.closest('li')
+        menuParentElement.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
@@ -1,3 +1,7 @@
+<div id="search">
+  <img src="<%= base_url %>/assets/images/search.svg">
+  <input autocomplete="off" placeholder="Search" />
+</div>
 <ul class="categories">
   <li>
     <ul class="menu-root">

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Contribuing Guide`
	`1`	`+# Contributing Guide`
`2`	`2`
`3`	`3`	`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.`
`4`	`4`