From 9c53dcc33eaf7ee10409709a798225e2ea4884e6 Mon Sep 17 00:00:00 2001
From: masterhc <cris_ferreira_pires@hotmail.com>
Date: Thu, 18 Apr 2024 15:00:49 +0100
Subject: [PATCH] Nav bar changes color based on the page thats visible

---
 views/navBar.ejs | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/views/navBar.ejs b/views/navBar.ejs
index 5c78a30..89b0046 100644
--- a/views/navBar.ejs
+++ b/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>