Add admin layout and pages: implement sidebar navigation and user role checks

app/layouts/admin.vue

@@ -0,0 +1,92 @@
+<template>
+	<Sidebar>
+		<template #sidebar>
+			<p class="title">Music - Admin</p>
+
+			<div class="category">
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:house"
+				>
+					Dashboard
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Manage</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin/artists"
+					type="link"
+					icon-name="lucide:mic-vocal"
+				>
+					Manage Artists
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/albums"
+					type="link"
+					icon-name="lucide:gallery-vertical-end"
+				>
+					Manage Albums
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/songs"
+					type="link"
+					icon-name="lucide:music"
+				>
+					Manage Songs
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Exit</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Exit Admin Panel
+				</Button>
+			</div>
+		</template>
+
+		<template #default>
+			<slot />
+		</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/layouts/default.vue

@@ -11,6 +11,8 @@ const onSearchInput = (v: string) => {
 		else router.replace("/search")
 	}, 300)
 }
+
+const { data: user } = useApiFetch<any>("/user")
 </script>
 
 <template>
@@ -69,6 +71,20 @@ const onSearchInput = (v: string) => {
 					Songs
 				</Button>
 			</div>
+
+			<div v-if="user?.role == 'admin'" class="category">
+				<p>Secret stuff</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Go To Admin Panel
+				</Button>
+			</div>
 		</template>
 
 		<template #default>

app/pages/admin.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+	layout: "admin",
+})
+</script>
+
+<template>
+	<NuxtPage />
+</template>

app/pages/admin/albums.vue

@@ -0,0 +1 @@
+<template></template>

app/pages/admin/artists.vue

@@ -0,0 +1 @@
+<template></template>

app/pages/admin/index.vue

@@ -0,0 +1 @@
+<template>Hello</template>

app/pages/admin/songs.vue

@@ -0,0 +1 @@
+<template>Songs</template>