From a7b8c0795238a5166743f5647098a328c4f1fbb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 9 Jul 2024 20:31:53 -0400
Subject: [PATCH] refactor(components): navbar updates

add `key` attribute to `a-menu` element
only show "new story" button to logged in users
change `data` check to check for `data.user`
---
 components/layouts/navbar.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/layouts/navbar.vue b/components/layouts/navbar.vue
index a4df6c8..b1fbf26 100644
--- a/components/layouts/navbar.vue
+++ b/components/layouts/navbar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { Grid } from "ant-design-vue";
+	import { Grid, ItemType } from "ant-design-vue";
 	const bp = Grid.useBreakpoint();
 	const { data, status } = useAuth();
 	const itemMap = ref({
@@ -22,6 +22,7 @@
 	let selected: string[] = [cur.value];
 
 	const clickFn = (minfo) => {
+		console.log("clicky", minfo);
 		if (itemMap.value[minfo.key] === undefined) return;
 		cur.value = itemMap.value[minfo.key];
 		selected = [cur.value];
@@ -43,12 +44,13 @@
 			}"
 			@click="clickFn"
 			:active-key="cur"
+			:key="data?.user?._id"
 		>
 			<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-sub-menu :disabled="!data?.user" v-if="!!data?.user" title="My Stuff" 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>
@@ -60,9 +62,9 @@
 			<a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false"> Admin </a-menu-item>
 			<a-menu-item key="logout" v-if="!!data?.user"> Logout </a-menu-item>
 		</a-menu>
-		<div>
+		<div v-if="data?.user">
 			<nuxt-link to="/new-story">
-				<a-button v-if="data?.user" type="primary" tooltip="Post a New Story">
+				<a-button type="primary" tooltip="Post a New Story">
 					<!-- <template #icon>
 					</template> -->
 					<icon istyle="regular" name="file-plus" />
@@ -70,7 +72,7 @@
 				</a-button>
 			</nuxt-link>
 		</div>
-		<div class="acbut" v-if="!data">
+		<div class="acbut" v-if="!data?.user">
 			<a-button size="large" @click="() => navigateTo('/auth/login')"> Login </a-button>
 			<a-button size="large" type="primary" @click="() => navigateTo('/auth/register')"> Register </a-button>
 		</div>