components/navigation/navigation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { navigateTo, useRoute } from "#app";
 
 const route = useRoute();
@@ -9,10 +9,6 @@ const { mobile } = useDisplay();
 const navOpen = ref(!mobile.value);
 const navSelected = ref([route.path]);
 
-watch(route, (v) => {
-  navSelected.value = [route.path];
-});
-
 const theme = useTheme();
 function switchTheme() {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
@@ -26,15 +22,15 @@ function switchTheme() {
   </VAppBar>
   <VNavigationDrawer v-model="navOpen" :temporary="mobile">
     <VList v-model:selected="navSelected" density="compact" nav>
+      <VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
       <VListItem prepend-icon="mdi-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
       <VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" />
       <VDivider />
     </VList>
     <template #append>
-      <VList v-model:selected="navSelected" density="compact" nav>
+      <VList density="compact" nav>
         <VDivider />
         <VListItem prepend-icon="mdi-theme-light-dark" title="Switch theme" class="mx-auto" @click="switchTheme()" />
-        <VListItem prepend-icon="mdi-login" title="My account" value="/login" @click="navigateTo('/login')" />
       </VList>
     </template>
   </VNavigationDrawer>