Finished sidebar for now

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>

app/pages/search.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const route = useRoute()
+
+watchEffect(() => console.log(route.query.q))
+</script>
+
+<template></template>