106 lines
3.1 KiB
Svelte
106 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { tick } from 'svelte';
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
|
import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
|
|
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
|
|
import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
|
|
import FolderIcon from '@lucide/svelte/icons/folder';
|
|
import ForwardIcon from '@lucide/svelte/icons/forward';
|
|
import Trash2Icon from '@lucide/svelte/icons/trash-2';
|
|
import { helpStore } from '$lib/stores/help.svelte';
|
|
|
|
let {
|
|
projects
|
|
}: {
|
|
projects: {
|
|
name: string;
|
|
url: string;
|
|
// This should be `Component` after @lucide/svelte updates types
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
icon: any;
|
|
}[];
|
|
} = $props();
|
|
|
|
const sidebar = useSidebar();
|
|
|
|
let open = $state(false);
|
|
let position = $state({ x: 0, y: 0 });
|
|
|
|
async function handleMoreClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
open = false;
|
|
position = { x: e.clientX, y: e.clientY };
|
|
await tick();
|
|
open = true;
|
|
}
|
|
</script>
|
|
|
|
<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
|
|
<Sidebar.GroupLabel>Gestion</Sidebar.GroupLabel>
|
|
<Sidebar.Menu>
|
|
{#each projects as item (item.name)}
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton>
|
|
{#snippet child({ props })}
|
|
<a href={item.url} {...props}>
|
|
<item.icon />
|
|
<span>{item.name}</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
{#snippet child({ props })}
|
|
<Sidebar.MenuAction showOnHover {...props}>
|
|
<EllipsisIcon />
|
|
<span class="sr-only">More</span>
|
|
</Sidebar.MenuAction>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
class="w-48 rounded-lg"
|
|
side={sidebar.isMobile ? 'bottom' : 'right'}
|
|
align={sidebar.isMobile ? 'end' : 'start'}
|
|
>
|
|
<DropdownMenu.Item>
|
|
<FolderIcon class="text-muted-foreground" />
|
|
<span>View Project</span>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item>
|
|
<ForwardIcon class="text-muted-foreground" />
|
|
<span>Share Project</span>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item>
|
|
<Trash2Icon class="text-muted-foreground" />
|
|
<span>Delete Project</span>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
{/each}
|
|
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton class="text-sidebar-foreground/70" onclick={handleMoreClick}>
|
|
<EllipsisIcon class="text-sidebar-foreground/70" />
|
|
<span>More</span>
|
|
</Sidebar.MenuButton>
|
|
|
|
<DropdownMenu.Root bind:open>
|
|
<DropdownMenu.Trigger
|
|
class="fixed z-50 size-0"
|
|
style="top: {position.y}px; left: {position.x}px"
|
|
/>
|
|
<DropdownMenu.Content class="w-48 rounded-lg" side="right" align="start">
|
|
<DropdownMenu.Item>
|
|
<a href="/dashboard/csv-upload" class="flex w-full items-center gap-2">
|
|
<FolderIcon class="size-4 text-muted-foreground" />
|
|
<span>Carga CSV</span>
|
|
</a>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|
|
</Sidebar.Group>
|