From 14cdb06e1523b56cb27bebc25e44739ea72b585f Mon Sep 17 00:00:00 2001
From: Yusuf Bera Ertan <y.bera003.06@protonmail.com>
Date: Tue, 25 Apr 2023 22:42:34 +0300
Subject: [PATCH] feat: add titles to navigation

---
 src/components/a.svelte          | 2 ++
 src/components/navbar.svelte     | 9 +++++----
 src/components/playingnow.svelte | 4 ++--
 src/routes/+layout.svelte        | 4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/a.svelte b/src/components/a.svelte
index c4f26ea..7d8499c 100644
--- a/src/components/a.svelte
+++ b/src/components/a.svelte
@@ -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 />
diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index c3b627b..d705e75 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -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>
diff --git a/src/components/playingnow.svelte b/src/components/playingnow.svelte
index 9a7dfcf..e0fe982 100644
--- a/src/components/playingnow.svelte
+++ b/src/components/playingnow.svelte
@@ -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={(_) => {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9802332..637e7a7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -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>