Search fix

docs/archive.html

@@ -47,10 +47,12 @@
           }
           else if (event.target.classList.contains('menu-button')) {
             document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
+            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
             event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
           }
-          else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
+          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
             document.querySelector('nav').classList = '';
+            document.querySelector('[type="search"]').classList = '';
             document.querySelector('.menu-button').classList = 'menu-button';
           }
           else if (event.target.classList.contains('copy-button')) {

docs/glossary.html

@@ -47,10 +47,12 @@
           }
           else if (event.target.classList.contains('menu-button')) {
             document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
+            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
             event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
           }
-          else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
+          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
             document.querySelector('nav').classList = '';
+            document.querySelector('[type="search"]').classList = '';
             document.querySelector('.menu-button').classList = 'menu-button';
           }
           else if (event.target.classList.contains('copy-button')) {

scripts/web.js

@@ -187,10 +187,10 @@ try {
         .replace(/<a/g, `<li><a tags="${taggedSnippet[1].join(',')}"`);
     output += '</ul>\n';
   }
-  output += `<h4><a href="./archive">Archive</a></h4>
+  output += `<h4 class="static-link"><a href="./archive">Archive</a></h4>
-  <h4><a href="./glossary">Glossary</a></h4>
+  <h4 class="static-link"><a href="./glossary">Glossary</a></h4>
-  <h4><a href="./contributing">Contributing</a></h4>
+  <h4 class="static-link"><a href="./contributing">Contributing</a></h4>
-  <h4><a href="./about">About</a></h4>
+  <h4 class="static-link"><a href="./about">About</a></h4>
   </nav><main class="col-centered"><span id="top"><br/><br/></span>`;
   // Loop over tags and snippets to create the list of snippets
   for (let tag of taggedData) {

static-parts/page-start.html

@@ -15,17 +15,22 @@
     <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
     <script>
       const search = (node) => {
+        if(node.value.toLowerCase().trim() === ''){
+          document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = ''); 
+          document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
+          return;
+        }
         let matchingTags = [];
-        Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
+        Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
-          let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
+          let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
           if(data.includes(true)){
             x.style.display = '';
-            matchingTags.push(x.getAttribute('tags').split(',')[0]);
+            matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
           }
           else x.style.display = 'none';
         });
-        Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
+        Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
-          x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
+          x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
         })
       }
       function scrollToTop(){