You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

55 lines
1.5 KiB

<div class="nav">
<div class="button-container" id="button-container" >
<div class="bt first home <%= selected=='none'?'':'.active' %> "
hx-get="/home"
hx-select="#container"
hx-indicator=".progress"
hx-on:click="javascript:resetSearch();toggle('home');"
hx-target="#container"
>
<h1 class="bt-inner">Home</h1>
</div>
<div class="bt collection"
hx-get="/favorites"
hx-target="#container"
hx-on:click="javascript:resetSearch();toggle('collection');"
hx-indicator=".progress"
>
<h1 class="bt-inner">Collection</h1>
</div>
<%- include('searchBar.ejs') %>
</div>
<% if(!data){%>
<button class="login"
hx-get="/login"
hx-indicator=".progress"
hx-target="#container"
>
Login
</button>
<% } else {%>
<button class="login burgerMenu"
hx-get="/dashboard"
hx-indicator=".progress"
hx-target="#container"
>
<span class="material-symbols-outlined">
menu
</span>
</button>
<% } %>
</div>
<script>
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>