nav menu refactor + auth check

src/components/Navbar/NavBar.vue

@@ -1,22 +1,37 @@
 <script setup>
-import { h, onMounted, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { NMenu, NButton, NDrawer, NIcon } from 'naive-ui'
 import MenuIcon from '@/components/Navbar/MenuIcon.vue'
 import { RouterLink, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+
+const authStore = useAuthStore()
+const { isAuthenticated } = authStore
 
 const showMobileMenu = ref(false)
 
 const route = useRoute()
 const activeKey = ref('collection')
 
-const menuOptions = [
-  { label: 'Collection', key: 'collection' },
-  { label: 'Charts', key: 'charts' },
-  { label: 'Parsers', key: 'parsers' },
-  { label: 'Personal', key: 'personal' },
-  { label: 'Login', key: 'login' },
-]
+const mainMenu = computed(() => {
+  return [
+    { label: 'Collection', key: 'collection' },
+    { label: 'Charts', key: 'charts' },
+    { label: 'Parsers', key: 'parsers' },
+  ]
+})
 
+const authMenu = computed(() => {
+  if (!isAuthenticated) {
+    return [
+      { label: 'Login', key: 'login' }
+    ]
+  }
+
+  return [
+    { label: 'Personal', key: 'personal' },
+  ]
+})
 
 const windowWidth = ref(window.innerWidth)
 
@@ -51,16 +66,29 @@ const renderLabel = (option) => {
     <div class="logo">Merch tracker</div>
 
     <n-menu
-      class="menu-desktop"
-      :options="menuOptions"
+      class="main-menu"
+      :options="mainMenu"
       mode="horizontal"
       :collapsed="false"
       :value="activeKey"
       @update:value="activeKey = $event"
-      v-if="windowWidth > 768"
+      v-if="isAuthenticated && windowWidth > 768"
       :render-label="renderLabel"
     />
 
+    <div class="auth-menu-container">
+      <n-menu
+        class="auth-menu"
+        :options="authMenu"
+        mode="horizontal"
+        :collapsed="false"
+        :value="activeKey"
+        @update:value="activeKey = $event"
+        v-if="windowWidth > 768"
+        :render-label="renderLabel"
+      />
+    </div>
+
     <n-button
       class="menu-mobile-button"
       @click="showMobileMenu = !showMobileMenu"
@@ -72,7 +100,7 @@ const renderLabel = (option) => {
 
     <n-drawer v-model:show="showMobileMenu" placement="right">
       <n-menu
-        :options="menuOptions"
+        :options="isAuthenticated ? [...mainMenu, ...authMenu] : authMenu"
         mode="vertical"
         :value="activeKey"
         @update:value="activeKey = $event; showMobileMenu = false"
@@ -98,12 +126,25 @@ const renderLabel = (option) => {
 .logo {
   font-weight: bold;
   font-size: 1.2rem;
-
   flex-shrink: 0;
 }
 
-.menu-desktop {
+.main-menu {
   display: flex;
+  margin-right: auto;
+}
+
+.auth-menu-container {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  min-width: 150px;
+  padding-right: 16px;
+  box-sizing: border-box;
+}
+
+.auth-menu {
+  margin-left: 20px;
 }
 
 .menu-mobile-button {

src/stores/authStore.js

@@ -29,7 +29,7 @@ export const useAuthStore = defineStore('auth', () => {
       setToken(access_token)
       user.value = userData || null
 
-      router.push({ name: 'startPage'})
+      router.push({ name: 'collection'})
     } catch (error) {
       console.error('Login error:', error)
     }