feat(components): finish navbar

components/layouts/navbar.vue

@@ -1,24 +1,35 @@
 <script lang="ts" setup>
 	import { log } from "~/lib/server/logger";
+	import { MenuProps } from "ant-design-vue";
 
+	const { data, status } = useAuth();
 	const itemMap = {
-		bands: "/bands",
+		home: "/",
+		bands: "bands",
 		authors: "/authors",
-		login: "/login",
+		forum: "/forum",
-		register: "/register",
+		account: "/my-stuff",
+		"edit-profile": "/my-stuff/profile",
+		stories: "/my-stuff/stories",
+		drafts: "/my-stuff/drafts",
+		reviews: "/my-stuff/reviews",
+		messages: "/messages",
+		profile: `/user/${data?.value?.user?._id || 0}`,
+		admin: "/admin",
 	};
 	let cur = ref<string>(
 		Object.keys(itemMap).find((a) => itemMap[a] === useRoute().path) ||
 			useRoute().path,
 	);
 	let selected: string[] = [cur.value];
+
 	const clickFn = (minfo) => {
+		if (itemMap[minfo.key] === undefined) return;
 		cur.value = itemMap[minfo.key];
 		selected = [cur.value];
 		navigateTo(itemMap[minfo.key]);
 	};
-	console.log({ label: "client", message: cur.value });
+	console.log({ label: "client", value: cur.value, stat: status.value });
-	const { data } = useAuth();
 </script>
 
 <template>
@@ -30,24 +41,38 @@
 				height: '40px',
 				alignSelf: 'center',
 				justifyContent: 'stretch',
-				// width: '100%'
+				width: '100%',
 			}"
 			@click="clickFn"
 			:active-key="cur"
 		>
+			<a-menu-item key="home"> Home </a-menu-item>
 			<a-menu-item key="bands"> Bands </a-menu-item>
 			<a-menu-item key="authors"> Authors </a-menu-item>
+			<a-menu-item key="forum"> Message Board </a-menu-item>
+			<a-sub-menu title="My Stuff" v-if="!!data?.user" key="group/my-stuff">
+				<a-menu-item key="account"> Account </a-menu-item>
+				<a-menu-item key="edit-profile"> Edit Profile </a-menu-item>
+				<a-menu-item key="profile"> View Profile </a-menu-item>
+				<a-menu-item key="stories"> Stories </a-menu-item>
+				<a-menu-item key="drafts"> Drafts </a-menu-item>
+				<a-menu-item key="reviews"> Manage Reviews </a-menu-item>
+				<a-menu-item key="messages"> Private Messages </a-menu-item>
+			</a-sub-menu>
+			<a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false">
+				Admin
+			</a-menu-item>
 		</a-menu>
 		<div class="acbut" v-if="!data">
 			<a-button size="large" @click="() => navigateTo('/login')">
-				log in
+				Log In
 			</a-button>
 			<a-button
 				size="large"
 				type="primary"
 				@click="() => navigateTo('/register')"
 			>
-				register
+				Register
 			</a-button>
 		</div>
 	</div>
@@ -55,13 +80,14 @@
 <style scoped>
 	.navibar {
 		align-self: stretch;
-		flex-grow: 1;
 		/* min-width: max-content; */
 	}
 
 	.acbut {
-		justify-content: space-around;
+		justify-content: space-between;
 		display: flex;
+		flex-grow: 0.01;
+		margin-left: auto;
 	}
 
 	.acbut > * + * {