Nav bar changes color based on the page thats visible

views/navBar.ejs

@@ -1,19 +1,19 @@
 
 <div class="nav">
   <div class="button-container" id="button-container" >
-        <div class="bt first" 
+        <div class="bt first home active" 
           hx-get="/home" 
           hx-select="#container" 
           hx-indicator=".progress"
-          hx-on:click="resetSearch()"
+          hx-on:click="javascript:resetSearch();toggle('home');"
           hx-target="#container" 
           > 
           <h1 class="bt-inner">Home</h1>
         </div>
-        <div class="bt" 
+        <div class="bt collection" 
           hx-get="/favorites" 
           hx-target="#container"  
-          hx-on:click="resetSearch()" 
+          hx-on:click="javascript:resetSearch();toggle('collection');" 
           hx-indicator=".progress" 
           > 
           <h1 class="bt-inner">Collection</h1>
@@ -46,4 +46,9 @@
     let search = document.getElementById('search');
     search.value = '';
   }
+  function toggle(elementClassName)
+  {
+        document.querySelector('.active').classList.remove('active');
+        document.querySelector(`.${elementClassName}`).classList.add('active');
+  };
 </script>