From 7ff6571982776a24f36cc8fd882fdf2d26dcc0da Mon Sep 17 00:00:00 2001
From: AdrienLSH <git.adrienlsh@42l.fr>
Date: Tue, 16 Jan 2024 10:14:25 +0100
Subject: [PATCH] html/css: better readability for navbar account links

---
 frontend/static/js/api/client.js | 16 ++++------------
 frontend/templates/index.html    | 14 +++++++++-----
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/static/js/api/client.js b/frontend/static/js/api/client.js
index bc3559c..f8b2974 100644
--- a/frontend/static/js/api/client.js
+++ b/frontend/static/js/api/client.js
@@ -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;
 	}
diff --git a/frontend/templates/index.html b/frontend/templates/index.html
index 341c3ff..bb91a97 100644
--- a/frontend/templates/index.html
+++ b/frontend/templates/index.html
@@ -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>