From 909d49a3e2fa305d5ff79593d14322eaac022a61 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Thu, 14 Aug 2025 12:59:16 +0200
Subject: [PATCH] Add active state styling to navigation menu items

---
 app/components/NavBar.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
index d4e9d95..76f0ac5 100644
--- a/app/components/NavBar.vue
+++ b/app/components/NavBar.vue
@@ -33,14 +33,16 @@
 
         <v-divider></v-divider>
 
-        <v-list density="compact" nav>
+        <v-list density="compact" nav active-class="bg-active">
             <v-list-item
+                :active="$route.name === 'index'"
                 prepend-icon="mdi-home"
                 title="Home"
                 value="home"
                 @click="navigateTo('/')"
             ></v-list-item>
             <v-list-item
+                :active="$route.name === 'profile'"
                 prepend-icon="mdi-account"
                 title="Profile"
                 value="profile"
@@ -52,6 +54,7 @@
 
 <script setup>
 import { ref, capitalize } from "vue";
+import { useSystemStore } from "~/stores/system";
 
 const drawer = ref(false);
 const { data, status, signOut } = useAuth();
@@ -63,4 +66,9 @@ const logout = async () => {
 };
 </script>
 
-<style></style>
+<style>
+.bg-active {
+    background-color: grey;
+    color: white !important;
+}
+</style>