From 8a857924b6e588c90ff1decdeb07a82512375530 Mon Sep 17 00:00:00 2001
From: masterhc <cris_ferreira_pires@hotmail.com>
Date: Sat, 20 Apr 2024 15:43:55 +0100
Subject: [PATCH] Cosmetic: NavBar: Selection Indicators

---
 views/home.ejs      |  2 +-
 views/navBar.ejs    | 20 ++++++++++----------
 views/searchBar.ejs |  4 +++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/views/home.ejs b/views/home.ejs
index 7035bd9..cd98e68 100644
--- a/views/home.ejs
+++ b/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>
diff --git a/views/navBar.ejs b/views/navBar.ejs
index 89b0046..1d4fdb1 100644
--- a/views/navBar.ejs
+++ b/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>
diff --git a/views/searchBar.ejs b/views/searchBar.ejs
index f5375d3..7e4a740 100644
--- a/views/searchBar.ejs
+++ b/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>