Add active state styling to navigation menu items

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>