From f8115e2000547ff45698b6373d962bf1ade929cc Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 31 Jan 2024 03:25:06 -0800
Subject: feat(layout): dropdown for schedule

---
 src/routes/+layout.svelte | 81 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 3 deletions(-)

(limited to 'src/routes')

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>
-- 
cgit v1.2.3