mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-20 07:54:19 +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/index.js';
|
|
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
|
|
import {useSidebar} from '$lib/components/ui/sidebar/index.js';
|
|
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';
|
|
|
|
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={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>
|