starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-20 15:55:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

working on the frontend

Browse Source
This commit is contained in:
maxDorninger
2025-04-27 18:04:50 +02:00
parent 4fc2461d7f
commit 180771882d
111 changed files with 6187 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/src/lib/components/nav-projects.svelte Normal file
View File

@@ -0,0 +1,70 @@
<script lang="ts">
import {useSidebar} from "$lib/components/ui/sidebar/context.svelte.js";
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>Projects</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 rounded-lg"
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>
<Forward 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.MenuItem>
<Sidebar.MenuButton class="text-sidebar-foreground/70">
<Ellipsis class="text-sidebar-foreground/70"/>
<span>More</span>
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Group>