mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-17 23:23:25 +02:00
71 lines
2.1 KiB
Svelte
71 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
|
import * as Sidebar from '$lib/components/ui/sidebar';
|
|
import { useSidebar } from '$lib/components/ui/sidebar';
|
|
import Ellipsis from '@lucide/svelte/icons/ellipsis';
|
|
import Folder from '@lucide/svelte/icons/folder';
|
|
import Share from '@lucide/svelte/icons/share';
|
|
import Trash2 from '@lucide/svelte/icons/trash-2';
|
|
import { resolve } from '$app/paths';
|
|
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();
|
|
</script>
|
|
|
|
<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
|
|
<Sidebar.GroupLabel><!-- TODO: what to set this label to?? --></Sidebar.GroupLabel>
|
|
<Sidebar.Menu>
|
|
{#each projects as item (item.name)}
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton>
|
|
{#snippet child({ props })}
|
|
<a href={resolve(item.url, {})} {...props}>
|
|
<item.icon />
|
|
<span>{item.name}</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
{#snippet child({ props })}
|
|
<Sidebar.MenuAction showOnHover {...props}>
|
|
<Ellipsis />
|
|
<span class="sr-only">More</span>
|
|
</Sidebar.MenuAction>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
class="w-48"
|
|
side={sidebar.isMobile ? 'bottom' : 'right'}
|
|
align={sidebar.isMobile ? 'end' : 'start'}
|
|
>
|
|
<DropdownMenu.Item>
|
|
<Folder class="text-muted-foreground" />
|
|
<span>View Project</span>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item>
|
|
<Share class="text-muted-foreground" />
|
|
<span>Share Project</span>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item>
|
|
<Trash2 class="text-muted-foreground" />
|
|
<span>Delete Project</span>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
{/each}
|
|
</Sidebar.Menu>
|
|
</Sidebar.Group>
|