From cf29c26abc9f92574320193c8fa49c52707e17cc Mon Sep 17 00:00:00 2001
From: Wroclaw <wroclaw223@outlook.com>
Date: Thu, 21 Dec 2023 03:29:42 +0100
Subject: [PATCH 1/2] components/navigation/navigation: move "login" to bottom

and rename it to "My account"
---
 components/navigation/navigation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
index eed71da..a55165e 100644
--- a/components/navigation/navigation.vue
+++ b/components/navigation/navigation.vue
@@ -22,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 density="compact" nav>
+      <VList v-model:selected="navSelected" 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>

From bcace5cbd71820cd6df901666f4af0134fe1fcbb Mon Sep 17 00:00:00 2001
From: Wroclaw <wroclaw223@outlook.com>
Date: Thu, 21 Dec 2023 03:31:33 +0100
Subject: [PATCH 2/2] components/navigation/navigation: watch for route changes

and select value in nav properly
---
 components/navigation/navigation.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
index a55165e..f981960 100644
--- a/components/navigation/navigation.vue
+++ b/components/navigation/navigation.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { navigateTo, useRoute } from "#app";
 
 const route = useRoute();
@@ -9,6 +9,10 @@ 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';