dusk/musikspider
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add titles to navigation

Browse Source
This commit is contained in:
dusk 2023-04-25 22:42:34 +03:00
parent e8e6ce3eba
commit 14cdb06e15
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA
4 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/a.svelte
View File

@ -2,12 +2,14 @@
import { page } from '$app/stores';
export let href: string;
export let title: string = '';
$: isOnPage = href === $page.route.id;
</script>
<a
{href}
{title}
class="btn py-2 px-2.5 {isOnPage ? 'variant-ghost-primary' : 'hover:variant-soft-primary'}"
>
<slot />

9
src/components/navbar.svelte
View File

@ -4,11 +4,12 @@
import IconSettings from '~icons/mdi/settings';
import IconArtist from '~icons/mdi/artist';
import IconAlbum from '~icons/mdi/album';
import IconPlaylist from '~icons/mdi/playlist-music';
</script>
<nav class="flex">
<Link href="/"><IconMusic class="w-7 h-7" /></Link>
<Link href="/albums"><IconAlbum class="w-7 h-7" /></Link>
<Link href="/artists"><IconArtist class="w-7 h-7" /></Link>
<Link href="/settings"><IconSettings class="w-7 h-7" /></Link>
<Link title="tracks" href="/"><IconMusic class="w-7 h-7" /></Link>
<Link title="albums" href="/albums"><IconAlbum class="w-7 h-7" /></Link>
<Link title="artists" href="/artists"><IconArtist class="w-7 h-7" /></Link>
<Link title="settings" href="/settings"><IconSettings class="w-7 h-7" /></Link>
</nav>

4
src/components/playingnow.svelte
View File

@ -33,7 +33,7 @@
</script>
{#if $playingNow !== null}
<div class="flex gap-2">
<div class="flex gap-2 z-10">
<audio
id="audio-source"
src={audioUrl}
@ -43,7 +43,7 @@
autoplay
/>
<button
class="z-10 relative placeholder w-12 h-12"
class="relative placeholder w-12 h-12"
on:pointerenter={(_) => (showIcon = true)}
on:pointerleave={(_) => (showIcon = false)}
on:click={(_) => {

4
src/routes/+layout.svelte
View File

@ -65,8 +65,8 @@
<AppShell>
<svelte:fragment slot="footer">
<div class="w-screen">
<div class="card fixed z-[1] mr-4 bottom-14 right-0"><Navbar /></div>
<div class="card rounded-none fixed z-[1] w-full bottom-0 flex items-center h-12">
<div class="card fixed mr-4 bottom-14 right-0"><Navbar /></div>
<div class="card rounded-none fixed w-full bottom-0 flex items-center h-12">
<PlayingNow />
<div class="ml-auto">volume</div>
</div>