refactor(layout): dropdown component

1 files changed, 105 insertions, 0 deletions

diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
new file mode 100644
index 00000000..efbafa1a
--- /dev/null
+++ b/src/lib/Dropdown.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	interface Item {
+		name: string;
+		url: string;
+	}
+
+	export let items: Item[] = [];
+	export let title: string;
+
+	let open = false;
+
+	const handleClickOutside = (event: any) => {
+		if (!event.target.closest('.dropdown')) open = false;
+	};
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div class="dropdown" id="dropdown">
+	<span
+		class="header-item dropdown-toggle"
+		id="dropdown-toggle"
+		on:click|preventDefault={() => (open = !open)}
+		on:keydown={() => {}}
+		role="button"
+		tabindex="0"
+	>
+		{title}
+	</span>
+
+	<div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}>
+		{#each items as item}
+			<a href={item.url} class="header-item">
+				{item.name}
+			</a>
+		{/each}
+	</div>
+</div>
+
+<style lang="scss">
+	a {
+		color: var(--base06);
+	}
+
+	.header-item {
+		margin: 0 0.5rem;
+	}
+
+	.header-item:hover {
+		text-decoration: none;
+	}
+
+	.header-item:active {
+		outline: none;
+	}
+
+	.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.25s;
+		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>