aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Dropdown.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Dropdown.svelte')
-rw-r--r--src/lib/Dropdown.svelte127
1 files changed, 0 insertions, 127 deletions
diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
deleted file mode 100644
index dd48af45..00000000
--- a/src/lib/Dropdown.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
- interface Item {
- name: string;
- url: string;
- onClick?: () => void;
- preventDefault?: boolean;
- }
-
- export let items: Item[] = [];
- export let title: string | undefined = undefined;
- export let header = true;
- export let center = false;
-
- 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"
- style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${
- center ? 'translateX(-50%)' : 'unset'
- };`}
->
- <span
- class={`${header ? 'header-item' : ''} dropdown-toggle`}
- id="dropdown-toggle"
- on:click|preventDefault={() => (open = !open)}
- on:keydown={() => {}}
- role="button"
- tabindex="0"
- >
- {#if title}
- {title}
- {:else}
- <slot name="title" />
- {/if}
- </span>
-
- <div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}>
- {#each items as item}
- <a
- href={item.url}
- class="header-item"
- on:click={(e) => {
- if (item.preventDefault) e.preventDefault();
- if (item.onClick) item.onClick();
- }}
- >
- {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: var(--dropdown-left);
- transform: var(--dropdown-transform);
- z-index: 1;
- }
-
- .dropdown-open {
- opacity: 1;
- transform: translateY(0);
- visibility: visible;
- transition-delay: 0s, 0s, 0s;
- left: var(--dropdown-left);
- transform: var(--dropdown-transform);
- }
-
- .dropdown:hover .dropdown-content {
- opacity: 1;
- transform: translateY(0);
- visibility: visible;
- transition-delay: 0s, 0s, 0s;
- left: var(--dropdown-left);
- transform: var(--dropdown-transform);
- }
-
- .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>