diff options
Diffstat (limited to 'src/lib/Dropdown.svelte')
| -rw-r--r-- | src/lib/Dropdown.svelte | 127 |
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> |