From 4b6771c0dd785ba6d6aa2d21c419769c8e19adf0 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: Mon, 9 Dec 2024 15:43:44 -0500
Subject: [PATCH] refactor(components): update navbar

- unwrap add story button from div and nuxt-link
- use `onclick` handler to navigate to the "new story" page
- better align the new story button with the rest of the navbar on tablet+ viewports
---
 components/layouts/navbar.vue | 52 +++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/components/layouts/navbar.vue b/components/layouts/navbar.vue
index 52e85b5..cda21b6 100644
--- a/components/layouts/navbar.vue
+++ b/components/layouts/navbar.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-	import { Grid, ItemType } from "ant-design-vue";
+	import { Grid } from "ant-design-vue";
+
 	const bp = Grid.useBreakpoint();
 	const { data, status } = useAuth();
 	const itemMap = ref({
@@ -46,35 +47,31 @@
 			: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="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 :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>
-				<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-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-item key="logout" v-if="!!data?.user"> Logout </a-menu-item>
+			<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 v-if="data?.user">
-			<nuxt-link to="/new-story">
-				<a-button type="primary" tooltip="Post a New Story">
-					<!-- <template #icon>
+		<a-button class="new-btn" type="primary" tooltip="Post a New Story" @click="() => navigateTo(`/new-story`)" v-if="data?.user">
+			<!-- <template #icon>
 					</template> -->
-					<icon istyle="regular" name="file-plus" />
-					<span style="margin-left: 0.5em"> Post a New Story </span>
-				</a-button>
-			</nuxt-link>
-		</div>
+			<icon istyle="regular" name="file-plus" />
+			<span style="margin-left: 0.5em"> Post a New Story </span>
+		</a-button>
 		<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>
+			<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>
 	</div>
 </template>
@@ -101,4 +98,11 @@
 		flex-grow: 1.2;
 		justify-content: stretch;
 	}
+
+	@media (min-width: 768px) {
+		.new-btn {
+			align-self: self-end;
+			margin-top: 1em;
+		}
+	}
 </style>