84 lines
2.2 KiB
Svelte
84 lines
2.2 KiB
Svelte
<script>
|
|
import { page } from "$app/stores";
|
|
import LL from "$i18n/i18n-svelte";
|
|
import {
|
|
mdiAccountMusic,
|
|
mdiAccountMusicOutline,
|
|
mdiAlbum,
|
|
mdiHome,
|
|
mdiHomeOutline,
|
|
mdiMusicNote,
|
|
mdiMusicNoteOutline,
|
|
mdiPlus,
|
|
} from "@mdi/js";
|
|
|
|
import { iconAlbumOutline, iconSearch, iconSearchFilled } from "$lib/util/icons";
|
|
import { userPlaylists } from "$lib/util/testdata";
|
|
|
|
import NavbarItemLarge from "./NavbarItemLarge.svelte";
|
|
import NavbarItemSmall from "./NavbarItemSmall.svelte";
|
|
import CurrentCover from "$lib/components/player/CurrentCover.svelte";
|
|
import IconButton from "$lib/components/ui/IconButton.svelte";
|
|
import { linkUrl, pageMatchesLink, playlistLink } from "$lib/util/functions";
|
|
</script>
|
|
|
|
<div class="flex flex-col h-full">
|
|
<ul class="menu menu-compact flex flex-col p-1">
|
|
<NavbarItemLarge
|
|
title={$LL.home()}
|
|
icon={mdiHomeOutline}
|
|
iconActive={mdiHome}
|
|
href="/"
|
|
/>
|
|
<NavbarItemLarge
|
|
title={$LL.search()}
|
|
icon={iconSearch}
|
|
iconActive={iconSearchFilled}
|
|
href="/search"
|
|
/>
|
|
<NavbarItemLarge
|
|
title={$LL.artists()}
|
|
icon={mdiAccountMusicOutline}
|
|
iconActive={mdiAccountMusic}
|
|
href="/artist"
|
|
/>
|
|
<NavbarItemLarge
|
|
title={$LL.albums()}
|
|
icon={iconAlbumOutline}
|
|
iconActive={mdiAlbum}
|
|
href="/album"
|
|
/>
|
|
<NavbarItemLarge
|
|
title={$LL.tracks()}
|
|
icon={mdiMusicNoteOutline}
|
|
iconActive={mdiMusicNote}
|
|
href="/tracks"
|
|
/>
|
|
</ul>
|
|
|
|
<div class="flex pl-5 pr-1 mt-1">
|
|
<a
|
|
href="/playlist"
|
|
class="flex-1 text-sm text-base-content text-opacity-40 font-semibold"
|
|
>{$LL.playlists()}</a
|
|
>
|
|
<IconButton path={mdiPlus} size="xs" ariaLabel={$LL.playlist_new()} />
|
|
</div>
|
|
|
|
<div class="flex flex-1 min-h-0 mb-2">
|
|
<div class="flex-1 overflow-y-scroll">
|
|
<ul>
|
|
{#each userPlaylists as playlist}
|
|
{@const link = playlistLink(playlist)}
|
|
<NavbarItemSmall
|
|
title={link.title}
|
|
href={linkUrl(link)}
|
|
active={pageMatchesLink($page, link)}
|
|
/>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<CurrentCover isLarge />
|
|
</div>
|