Set current menu point to active

aleksis/core/assets/App.vue

@@ -3,7 +3,7 @@
     <loading
         v-if="
         $apollo.loading &&
-        (!currentUser || !whoAmI || !systemProperties || !messages)
+        (!currentUser || !whoAmI || !systemProperties || !messages || !footerMenu)
       "
     >
     </loading>
@@ -19,45 +19,49 @@
           <v-list-item class="search">
             <sidenav-search/>
           </v-list-item>
-          <div v-for="menuItem in sideNavMenu" :key="menuItem.name">
-            <v-list-group
-                v-if="menuItem.subMenu.length > 0"
-                href="#!"
-                :prepend-icon="menuItem.icon"
-                v-model="openMenuItems[menuItem.name]"
-            >
-              <template #activator>
-                <v-list-item-title
-                >{{ $t(menuItem.titleKey) }}
-                </v-list-item-title>
-              </template>
+          <v-list-item-group :value="$route.name">
+            <div v-for="menuItem in sideNavMenu" :key="menuItem.name">
+              <v-list-group
+                  v-if="menuItem.subMenu.length > 0"
+                  href="#!"
+                  :prepend-icon="menuItem.icon"
+                  :value="$route.matched.slice(-2).shift().name === menuItem.name"
+              >
+                <template #activator>
+                  <v-list-item-title
+                  >{{ $t(menuItem.titleKey) }}
+                  </v-list-item-title>
+                </template>
+                <v-list-item
+                    v-for="subMenuItem in menuItem.subMenu"
+                    :to="{ name: subMenuItem.name }"
+                    :target="subMenuItem.newTab ? '_blank' : '_self'"
+                    :key="subMenuItem.name"
+                    :value="subMenuItem.name"
+                >
+                  <v-list-item-icon>
+                    <v-icon v-if="subMenuItem.icon"
+                    >{{ subMenuItem.icon }}
+                    </v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-title
+                  >{{ $t(subMenuItem.titleKey) }}
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list-group>
               <v-list-item
-                  v-for="subMenuItem in menuItem.subMenu"
-                  :to="{ name: subMenuItem.name }"
-                  :target="subMenuItem.newTab ? '_blank' : '_self'"
-                  :key="subMenuItem.name"
+                  v-else
+                  :to="{ name: menuItem.name }"
+                  :target="menuItem.newTab ? '_blank' : '_self'"
+                  :value="menuItem.name"
               >
                 <v-list-item-icon>
-                  <v-icon v-if="subMenuItem.icon"
-                  >{{ subMenuItem.icon }}
-                  </v-icon>
+                  <v-icon v-if="menuItem.icon">{{ menuItem.icon }}</v-icon>
                 </v-list-item-icon>
-                <v-list-item-title
-                >{{ $t(subMenuItem.titleKey) }}
-                </v-list-item-title>
+                <v-list-item-title>{{ $t(menuItem.titleKey) }}</v-list-item-title>
               </v-list-item>
-            </v-list-group>
-            <v-list-item
-                v-else
-                :to="{ name: menuItem.name }"
-                :target="menuItem.newTab ? '_blank' : '_self'"
-            >
-              <v-list-item-icon>
-                <v-icon v-if="menuItem.icon">{{ menuItem.icon }}</v-icon>
-              </v-list-item-icon>
-              <v-list-item-title>{{ $t(menuItem.titleKey) }}</v-list-item-title>
-            </v-list-item>
-          </div>
+            </div>
+          </v-list-item-group>
         </v-list>
 
         <template v-slot:append>
@@ -285,7 +289,6 @@ export default {
       systemProperties: null,
       messages: null,
       footerMenu: null,
-      openMenuItems: {},
     };
   },
   computed: {