From f06ea7c4b3a372961e82df31e02c44fc0e96f8ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 9 Nov 2025 19:13:49 +0100
Subject: [PATCH] Finished sidebar for now

---
 app/layouts/default.vue | 92 ++++++++++++++++++++++++++++++++++++++++-
 app/pages/search.vue    |  7 ++++
 2 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/search.vue

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 011b76e..5eaa024 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,7 +1,74 @@
+<script setup lang="ts">
+const router = useRouter()
+
+let timeout: ReturnType<typeof setTimeout>
+
+const onSearchInput = (v: string) => {
+	clearTimeout(timeout)
+	timeout = setTimeout(() => {
+		if (v && v.trim() !== "")
+			router.replace(`/search?q=${encodeURIComponent(v)}`)
+		else router.replace("/search")
+	}, 300)
+}
+</script>
+
 <template>
 	<Sidebar>
 		<template #sidebar>
-			<Button>Home</Button>
+			<p class="title">Music</p>
+
+			<Input
+				class="search-input"
+				icon-name="lucide:search"
+				placeholder="Search..."
+				@input="onSearchInput"
+				@focus="router.replace('/search')"
+			/>
+
+			<div class="category">
+				<Button
+					full
+					variant="ghost"
+					to="/"
+					type="link"
+					icon-name="lucide:house"
+				>
+					Home
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Library</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/library/artists"
+					type="link"
+					icon-name="lucide:mic-vocal"
+				>
+					Artists
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/library/albums"
+					type="link"
+					icon-name="lucide:gallery-vertical-end"
+				>
+					Albums
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/library/songs"
+					type="link"
+					icon-name="lucide:music"
+				>
+					Songs
+				</Button>
+			</div>
 		</template>
 
 		<template #default>
@@ -9,3 +76,26 @@
 		</template>
 	</Sidebar>
 </template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+}
+
+.search-input,
+.title {
+	margin-bottom: 1rem;
+}
+
+.category {
+	margin-bottom: 0.8rem;
+
+	& > p {
+		@include fontSize(13px);
+		font-weight: 600;
+		margin-bottom: 0.1rem;
+	}
+}
+</style>
diff --git a/app/pages/search.vue b/app/pages/search.vue
new file mode 100644
index 0000000..03cf077
--- /dev/null
+++ b/app/pages/search.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const route = useRoute()
+
+watchEffect(() => console.log(route.query.q))
+</script>
+
+<template></template>