starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-21 08:15:36 +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

66
web/src/lib/components/nav-main.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts">
let {
items,
}: {
items: {
title: string;
url: string;
// this should be `Component` after @lucide/svelte updates types
// eslint-disable-next-line @typescript-eslint/no-explicit-any
icon?: any;
isActive?: boolean;
items?: {
title: string;
url: string;
}[];
}[];
} = $props();
</script>
<Sidebar.Group>
<Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
<Sidebar.Menu>
{#each items as mainItem (mainItem.title)}
<Collapsible.Root open={mainItem.isActive} class="group/collapsible">
{#snippet child({props})}
<Sidebar.MenuItem {...props}>
<Collapsible.Trigger>
{#snippet child({props})}
<Sidebar.MenuButton {...props}>
{#snippet tooltipContent()}
{mainItem.title}
{/snippet}
{#if mainItem.icon}
<mainItem.icon/>
{/if}
<span>{mainItem.title}</span>
<ChevronRight
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
/>
</Sidebar.MenuButton>
{/snippet}
</Collapsible.Trigger>
<Collapsible.Content>
{#if mainItem.items}
<Sidebar.MenuSub>
{#each mainItem.items as subItem (subItem.title)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton>
{#snippet child({props})}
<a href={subItem.url} {...props}>
<span>{subItem.title}</span>
</a>
{/snippet}
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}
</Sidebar.MenuSub>
{/if}
</Collapsible.Content>
</Sidebar.MenuItem>
{/snippet}
</Collapsible.Root>
{/each}
</Sidebar.Menu>
</Sidebar.Group>