starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

html/css: better readability for navbar account links

Browse Source
This commit is contained in:
AdrienLSH
2024-01-16 10:14:25 +01:00
parent a0e58e7889
commit 7ff6571982
2 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/static/js/api/client.js
View File

@ -110,22 +110,14 @@ class Client
{
this.me = new MyProfile(this);
await this.me.init();
[...document.getElementById('nav-account-links').children].forEach(el => {
if (el.matches('[logged-in]'))
el.classList.remove('d-none');
else
el.classList.add('d-none');
});
document.getElementById('navbarLoggedOut').classList.add('d-none');
document.getElementById('navbarLoggedIn').classList.remove('d-none');
}
else
{
this.me = undefined;
[...document.getElementById('nav-account-links').children].forEach(el => {
if (el.matches('[logged-in]'))
el.classList.add('d-none');
else
el.classList.remove('d-none');
});
document.getElementById('navbarLoggedOut').classList.remove('d-none');
document.getElementById('navbarLoggedIn').classList.add('d-none');
}
this._logged = state;
}

14
frontend/templates/index.html
View File

@ -15,11 +15,15 @@
<a href="/search" class="nav-link" data-link>Search</a>
<a href="/home" class="nav-link" data-link>Home</a>
</div>
<div id="nav-account-links" class="navbar-nav d-flex justify-content-end flex-row gap-2">
<a href="/login" class="nav-link" data-link>Login</a>
<a href="/register" class="nav-link" data-link>Register</a>
<a logged-in href="/me" class="nav-link d-none" data-link>My Profile</a>
<a logged-in href="/logout" class="nav-link d-none" data-link>Logout</a>
<div class="navbar-nav justify-content-end">
<div id='navbarLoggedOut' class='d-flex flex-row gap-2'>
<a href="/login" class="nav-link" data-link>Login</a>
<a href="/register" class="nav-link" data-link>Register</a>
</div>
<div id='navbarLoggedIn' class='d-flex flex-row gap-2 d-none'>
<a href="/me" class="nav-link" data-link>My Profile</a>
<a href="/logout" class="nav-link" data-link>Logout</a>
</div>
</div>
</div>
</nav>