diff options
Diffstat (limited to 'src/lib/Layout/Dropdown.svelte')
| -rw-r--r-- | src/lib/Layout/Dropdown.svelte | 232 |
1 files changed, 116 insertions, 116 deletions
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index dd48af45..fb270dfe 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -1,127 +1,127 @@ <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; - }; + 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' - };`} + 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> + <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); - } + 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> |