126 lines
3.8 KiB
Svelte
126 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import * as Sidebar from '$lib/components/ui/sidebar';
|
|
import Home from 'virtual:icons/lucide/home';
|
|
import Library from 'virtual:icons/lucide/library';
|
|
import ListMusic from 'virtual:icons/lucide/list-music';
|
|
import Music2 from 'virtual:icons/lucide/music-2';
|
|
import Settings from 'virtual:icons/lucide/settings';
|
|
import CirclePlus from 'virtual:icons/lucide/circle-plus';
|
|
import { cn } from '$lib/utils';
|
|
import CreatePlaylistDialog from './CreatePlaylistDialog.svelte';
|
|
import { getLibraryState } from '$lib/library.svelte';
|
|
import { getPlayerState } from '$lib/player.svelte';
|
|
|
|
const library = getLibraryState();
|
|
const player = getPlayerState();
|
|
</script>
|
|
|
|
<Sidebar.Root collapsible="icon">
|
|
<Sidebar.Header>
|
|
<Sidebar.Menu>
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton isActive={$page.url.pathname === '/'} class="transition-all">
|
|
{#snippet tooltipContent()}
|
|
Home
|
|
{/snippet}
|
|
{#snippet child({ props })}
|
|
<a href="/" {...props}>
|
|
<Home />
|
|
<span>Home</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|
|
</Sidebar.Header>
|
|
<Sidebar.Content>
|
|
<Sidebar.Group>
|
|
<Sidebar.GroupLabel>Library</Sidebar.GroupLabel>
|
|
<Sidebar.Menu>
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton isActive={$page.url.pathname === '/tracks'} class="transition-all">
|
|
{#snippet tooltipContent()}
|
|
Tracks
|
|
{/snippet}
|
|
{#snippet child({ props })}
|
|
<a href="/tracks" {...props}>
|
|
<Music2 />
|
|
<span>Tracks</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
</Sidebar.MenuItem>
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton isActive={$page.url.pathname === '/albums'} class="transition-all">
|
|
{#snippet tooltipContent()}
|
|
Albums
|
|
{/snippet}
|
|
{#snippet child({ props })}
|
|
<a href="/albums" {...props}>
|
|
<Library />
|
|
<span>Albums</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
</Sidebar.MenuItem>
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton isActive={$page.url.pathname === '/playlists'} class="transition-all">
|
|
{#snippet tooltipContent()}
|
|
Playlists
|
|
{/snippet}
|
|
{#snippet child({ props })}
|
|
<a href="/playlists" {...props}>
|
|
<ListMusic />
|
|
<span>Playlists</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
<Sidebar.MenuSub>
|
|
<Sidebar.MenuSubItem>
|
|
<Sidebar.MenuSubButton class="cursor-pointer">
|
|
{#snippet child({ props })}
|
|
<CreatePlaylistDialog class={cn(props.class ?? '', 'w-full')}>
|
|
<CirclePlus class="!text-inherit" />
|
|
<span>Create Playlist</span>
|
|
</CreatePlaylistDialog>
|
|
{/snippet}
|
|
</Sidebar.MenuSubButton>
|
|
</Sidebar.MenuSubItem>
|
|
{#each library.playlists as [_, playlist]}
|
|
{@const playlistLocation = `/playlists/${playlist.id}`}
|
|
<Sidebar.MenuSubItem>
|
|
<Sidebar.MenuSubButton
|
|
class="cursor-pointer"
|
|
isActive={$page.url.pathname === playlistLocation}
|
|
href={playlistLocation}
|
|
ondblclick={() => player.playPlaylist({ id: playlist.id }, fetch)}
|
|
>
|
|
{playlist.name}
|
|
</Sidebar.MenuSubButton>
|
|
</Sidebar.MenuSubItem>
|
|
{/each}
|
|
</Sidebar.MenuSub>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|
|
</Sidebar.Group>
|
|
</Sidebar.Content>
|
|
<Sidebar.Footer>
|
|
<Sidebar.Menu>
|
|
<Sidebar.MenuItem>
|
|
<Sidebar.MenuButton isActive={$page.url.pathname === '/settings'} class="transition-all">
|
|
{#snippet tooltipContent()}
|
|
Settings
|
|
{/snippet}
|
|
{#snippet child({ props })}
|
|
<a href="/settings" {...props}>
|
|
<Settings />
|
|
<span>Settings</span>
|
|
</a>
|
|
{/snippet}
|
|
</Sidebar.MenuButton>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|
|
</Sidebar.Footer>
|
|
</Sidebar.Root>
|