From f9f7dcc8eb86e58af04adacd797f6de69a8816b9 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 11 Feb 2024 12:35:56 -0800
Subject: feat(layout): profile dropdown

---
 src/routes/+layout.svelte | 51 +++++++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 22 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 61d425f2..dfb3a278 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -125,9 +125,32 @@
 			<span class="header-item opaque separator">•</span>
 
 			{#if data.user}
-				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
-					{$locale().navigation.profile}
-				</a>
+				<Dropdown
+					items={[
+						{ name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) },
+						{
+							name: $locale().navigation.myBadgeWall,
+							url: root(`/user/${$userIdentity.name}/badges`)
+						},
+						{
+							name: $locale().navigation.logOut,
+							url: '#',
+							onClick: () => {
+								localStorage.removeItem('identity');
+								localStorage.removeItem('commit');
+
+								document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+								window.location.href = root('/api/authentication/log-out');
+							}
+						}
+					]}
+					header={false}
+				>
+					<span slot="title" class="header-item">
+						{$locale().navigation.profile}
+					</span>
+				</Dropdown>
 			{/if}
 
 			{#if data.user === undefined}
@@ -143,26 +166,10 @@
 				>
 					{$locale().navigation.logIn}
 				</a>
-			{:else}
-				<a
-					href={'#'}
-					class="header-item"
-					on:click={() => {
-						localStorage.removeItem('identity');
-						localStorage.removeItem('commit');
-
-						document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-
-						window.location.href = root('/api/authentication/log-out');
-					}}
-				>
-					{$locale().navigation.logOut}
+			{:else if data.user}
+				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
+					<img id="avatar" src={$userIdentity.avatar} alt="Avatar" />
 				</a>
-				{#if data.user}
-					<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
-						<img id="avatar" src={$userIdentity.avatar} alt="Avatar" />
-					</a>
-				{/if}
 			{/if}
 		</div>
 	</div>
-- 
cgit v1.2.3