From 12cf6f1531c00d84bf1deb2e08815d38492bd58c Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 5 Jan 2024 19:41:11 -0800
Subject: feat(css): navigation avatar

---
 src/routes/+layout.svelte | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a15e14ee..e148a076 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,7 +10,7 @@
 
 	export let data;
 
-	let currentUserIdentity = { name: '...', id: -1 };
+	let currentUserIdentity = { name: '...', id: -1, avatar: '' };
 
 	onMount(async () => {
 		if (browser && localStorage.getItem('redirect')) {
@@ -43,7 +43,7 @@
 			<a href="/tools" class="header-item">Tools</a>
 			<a href="/settings" class="header-item">Settings</a>
 
-			<span style="opacity: 50%;">|</span>
+			<span style="opacity: 50%;" class="header-item">|</span>
 
 			{#if data.user}
 				<a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a>
@@ -63,11 +63,12 @@
 					Log in with AniList
 				</a>
 			{:else}
-				<a href="/api/authentication/log-out" class="header-item"
-					>Log out<button class="smaller-button button-badge badge-info"
-						>{currentUserIdentity.name}</button
-					></a
-				>
+				<a href="/api/authentication/log-out" class="header-item">Log out </a>
+				{#if data.user}
+					<a href={`/user/${currentUserIdentity.name}`} class="header-item">
+						<img class="fancy-image" id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
+					</a>
+				{/if}
 			{/if}
 		</div>
 	</div>
@@ -134,7 +135,7 @@
 	}
 
 	.header-item {
-		margin: 0 0.625rem;
+		margin: 0 0.5rem;
 	}
 
 	.header-item:hover {
@@ -144,4 +145,10 @@
 	.header-item:active {
 		outline: none;
 	}
+
+	#avatar {
+		width: 2em;
+		display: inline-block;
+		vertical-align: middle;
+	}
 </style>
-- 
cgit v1.2.3