ayanova/src/App.vue

@@ -5,7 +5,36 @@
     <!-- <gztest ref="gztest"></gztest> -->
     <v-navigation-drawer v-if="isAuthenticated" v-model="drawer" app>
       <v-list dense>
-        <v-list-item
+        <template v-for="item in navItems">
+          <!-- TOP LEVEL can be holders or actions -->
+          <template v-if="!item.route">
+            <!-- TOP LEVEL HOLDER -->
+            <v-list-group
+              :prepend-icon="'fa-' + item.icon"
+              value="true"
+              :key="item.key"
+            >
+              <template v-slot:activator>
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
+              </template>
+              <template v-for="subitem in item.navItems">
+                <template v-if="!subitem.route">
+                  <!-- SECOND LEVEL HOLDER CONTAINS ONLY ACTIONS -->
+                  {{ subitem.title }}
+                </template>
+                <template v-else>
+                  <!-- SECOND LEVEL ACTION -->
+                </template>
+              </template>
+            </v-list-group>
+          </template>
+
+          <template v-else>
+            <!-- TOP LEVEL ACTION -->
+          </template>
+        </template>
+
+        <!-- <v-list-item
           v-for="item in navItems"
           :key="item.route"
           :to="item.route"
@@ -16,7 +45,7 @@
           <v-list-item-content>
             <v-list-item-title>{{ item.title }}</v-list-item-title>
           </v-list-item-content>
-        </v-list-item>
+        </v-list-item> -->
       </v-list>
     </v-navigation-drawer>
     <v-app-bar