Cosmetic: NavBar: Selection Indicators

views/home.ejs

@@ -17,7 +17,7 @@
     <div class="indeterminate" style="background-color: red;"></div>
   </div>
   <div id="wrapper">
-    <%- include('navBar.ejs', {data}) %> 
+    <%- include('navBar.ejs', {data, selected:true}) %> 
     <div class="container" id="container" >
       <h2 id="RecommendTitle">Recommended</h2>
       <div class="recommended" hx-get="/recommended" hx-trigger="load" hx-indicator=".progress"></div>

views/navBar.ejs

@@ -1,7 +1,7 @@
 
 <div class="nav">
   <div class="button-container" id="button-container" >
-        <div class="bt first home active" 
+        <div class="bt first home <%= selected=='none'?'':'.active' %> " 
           hx-get="/home" 
           hx-select="#container" 
           hx-indicator=".progress"
@@ -41,14 +41,14 @@
   <% } %>  
 </div> 
 <script>
-  function resetSearch() 
-  {
-    let search = document.getElementById('search');
-    search.value = '';
-  }
-  function toggle(elementClassName)
-  {
-        document.querySelector('.active').classList.remove('active');
+    function resetSearch() 
+    {
+        let search = document.getElementById('search');
+        search.value = '';
+    }
+    function toggle(elementClassName)
+    {
+        if(document.querySelector('.active')) document.querySelector('.active').classList.remove('active');
         document.querySelector(`.${elementClassName}`).classList.add('active');
-  };
+    };
 </script>

views/searchBar.ejs

@@ -5,7 +5,9 @@
         hx-indicator=".progress" 
         hx-target="#container" 
         id="search" 
-        placeholder="Search">
+        placeholder="Search"
+        onfocus="toggle()"
+        >
     </input>
     <span class="material-symbols-outlined searchIcon" onclick="triggerInputClick()">search</span>
 </div>