You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-25 04:53:00 +02:00
37 lines
980 B
Svelte
37 lines
980 B
Svelte
<script lang="ts">
|
|
import { clickOutside } from '$lib/utils/click-outside';
|
|
import { quintOut } from 'svelte/easing';
|
|
import { slide } from 'svelte/transition';
|
|
|
|
export let direction: 'left' | 'right' = 'right';
|
|
export let x = 0;
|
|
export let y = 0;
|
|
|
|
let menuElement: HTMLDivElement;
|
|
let left: number;
|
|
let top: number;
|
|
|
|
$: if (menuElement) {
|
|
const rect = menuElement.getBoundingClientRect();
|
|
const directionWidth = direction === 'left' ? rect.width : 0;
|
|
|
|
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
|
|
top = Math.min(window.innerHeight - rect.height, y);
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
transition:slide={{ duration: 200, easing: quintOut }}
|
|
bind:this={menuElement}
|
|
class="absolute z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
|
|
style="left: {left}px; top: {top}px;"
|
|
role="menu"
|
|
use:clickOutside
|
|
on:outclick
|
|
on:escape
|
|
>
|
|
<div class="flex flex-col rounded-lg">
|
|
<slot />
|
|
</div>
|
|
</div>
|