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

9
src/components/navbar.svelte
View File

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

4
src/components/playingnow.svelte
View File

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

4
src/routes/+layout.svelte
View File

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