mirror of
https://github.com/open-webui/open-webui
synced 2025-01-17 16:19:59 +00:00
31 lines
825 B
Svelte
31 lines
825 B
Svelte
|
<script lang="ts">
|
||
|
|
import { quadInOut, quintIn } from 'svelte/easing';
|
||
|
|
import { fade, slide } from 'svelte/transition';
|
||
|
|
|
||
|
|
export let show = false;
|
||
|
|
export let side = 'right';
|
||
|
|
export let width = '200px';
|
||
|
|
|
||
|
|
export let className = '';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if show}
|
||
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||
|
|
<div
|
||
|
|
class="absolute z-20 top-0 right-0 left-0 bottom-0 bg-black/10 w-full min-h-full h-full flex justify-center overflow-hidden overscroll-contain"
|
||
|
|
on:mousedown={() => {
|
||
|
|
show = false;
|
||
|
|
}}
|
||
|
|
transition:fade
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="absolute z-30 shadow-xl {side === 'right' ? 'right-0' : 'left-0'} top-0 bottom-0"
|
||
|
|
transition:slide={{ easing: quadInOut, axis: side === 'right' ? 'x' : 'y' }}
|
||
|
|
>
|
||
|
|
<div class="{className} h-full" style="width: {show ? width : '0px'}">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|