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>