feat(layout): profile dropdown

4 files changed, 37 insertions, 24 deletions

diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 24814f47..34052e21 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -14,7 +14,9 @@ const English: Locale = {
 		logIn: 'Log in with AniList',
 		logOut: 'Log out',
 		schedule: 'Schedule',
-		hololive: 'hololive'
+		hololive: 'hololive',
+		myProfile: 'My Profile',
+		myBadgeWall: 'My Badge Wall'
 	},
 	settings: {
 		fields: {
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 88d6f081..562b9fd5 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -14,7 +14,9 @@ const Japanese: Locale = {
 		logIn: 'AniListでログインする',
 		logOut: 'ログアウト',
 		schedule: 'スケジュール',
-		hololive: 'ホロライブ'
+		hololive: 'ホロライブ',
+		myProfile: 'プロフィール',
+		myBadgeWall: 'バッジウォール'
 	},
 	settings: {
 		fields: {
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 6194c4fc..5c32ceb3 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -17,6 +17,8 @@ export interface Locale {
 		logOut: LocaleValue;
 		schedule: LocaleValue;
 		hololive: LocaleValue;
+		myProfile: LocaleValue;
+		myBadgeWall: LocaleValue;
 	};
 	settings: {
 		fields: {
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>