feat(layout): dropdown for schedule

6 files changed, 91 insertions, 7 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 8c0b8127..b8587111 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -144,9 +144,9 @@
 				{#if $settings.displaySocialButton}
 					[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
 				{/if}
-				<span style="opacity: 50%;">|</span>
+				<span class="opaque">|</span>
 				{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-					<span style="opacity: 50%;">/{manga.chapters || '?'}</span>
+					<span class="opaque">/{manga.chapters || '?'}</span>
 				{/if}
 				<button
 					class="button-square button-action"
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index c5db6c3e..b1f5f9ea 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -10,7 +10,8 @@ const English: Locale = {
 		settings: 'Settings',
 		profile: 'Profile',
 		logIn: 'Log in with AniList',
-		logOut: 'Log out'
+		logOut: 'Log out',
+		schedule: 'Schedule'
 	},
 	settings: {
 		fields: {
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 6404c607..105b4b9b 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -10,7 +10,8 @@ const Japanese: Locale = {
 		settings: '設定',
 		profile: 'プロフィール',
 		logIn: 'AniListでログインする',
-		logOut: 'ログアウト'
+		logOut: 'ログアウト',
+		schedule: 'スケジュール'
 	},
 	settings: {
 		fields: {
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 5defce45..c2ecc94c 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -15,6 +15,7 @@ export interface Locale {
 		profile: LocaleValue;
 		logIn: LocaleValue;
 		logOut: LocaleValue;
+		schedule: LocaleValue;
 	};
 	settings: {
 		fields: {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 135fa6bf..b77ae58f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,6 +23,8 @@
 
 	export let data;
 
+	let dropdownOpen = false;
+
 	addMessages('en', english as unknown as LocaleDictionary);
 	addMessages('ja', japanese as unknown as LocaleDictionary);
 	init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });
@@ -71,6 +73,12 @@
 			});
 	});
 
+	const handleClickOutside = (event: any) => {
+		if (!event.target.closest('.dropdown')) {
+			dropdownOpen = false;
+		}
+	};
+
 	$: {
 		if ((data.url === '/' || data.url === '/completed') && !$subsPlease)
 			fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`))
@@ -79,6 +87,8 @@
 	}
 </script>
 
+<svelte:window on:click={handleClickOutside} />
+
 <HeadTitle />
 
 <div id="container">
@@ -90,8 +100,24 @@
 			>
 				{$locale().navigation.completed}
 			</a>
-			<a href={root('/schedule')} class="header-item">{$locale().navigation.subtitleSchedule}</a>
-			<a href={root('/updates')} class="header-item">{$locale().navigation.newReleases}</a>
+			<div class="dropdown" id="dropdown">
+				<span
+					class="header-item dropdown-toggle"
+					id="dropdown-toggle"
+					on:click|preventDefault={() => (dropdownOpen = !dropdownOpen)}
+					on:keydown={() => {}}
+					role="button"
+					tabindex="0"
+				>
+					{$locale().navigation.schedule}
+				</span>
+
+				<div class={`dropdown-content card card-small ${dropdownOpen ? 'dropdown-open' : ''}`}>
+					<a href={root('/schedule')} class="header-item">{$locale().navigation.subtitleSchedule}</a
+					>
+					<a href={root('/updates')} class="header-item">{$locale().navigation.newReleases}</a>
+				</div>
+			</div>
 			<a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
 			<a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>
 
@@ -156,7 +182,7 @@
 	</Notifications>
 </div>
 
-<style>
+<style lang="scss">
 	#header {
 		font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 			Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -236,4 +262,53 @@
 		border-radius: 8px;
 		box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base0E), 0 4px 30px var(--base01);
 	}
+
+	.dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-content {
+		display: block;
+		position: absolute;
+		min-width: max-content;
+		padding: 0.5em 0;
+		opacity: 0;
+		transform: translateY(-20px);
+		visibility: hidden;
+		$delay: 0.5s;
+		transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.dropdown-open {
+		opacity: 1;
+		transform: translateY(0);
+		visibility: visible;
+		transition-delay: 0s, 0s, 0s;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.dropdown:hover .dropdown-content {
+		opacity: 1;
+		transform: translateY(0);
+		visibility: visible;
+		transition-delay: 0s, 0s, 0s;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.dropdown-content a {
+		padding: 0.5em 0.75em;
+		text-decoration: none;
+		display: block;
+	}
+
+	.dropdown-content a:hover {
+		border-radius: 8px;
+		backdrop-filter: blur(160px);
+		background-color: var(--base01);
+	}
 </style>
diff --git a/src/styles/typography.css b/src/styles/typography.css
index e502fa90..caf65724 100644
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -19,3 +19,9 @@ body {
 	font-weight: 400;
 	text-shadow: none;
 }
+
+.opaque {
+	opacity: 1;
+	position: relative;
+	z-index: -1;
+}