Expandable groups

web/src/components/NavList.vue

@@ -7,9 +7,30 @@
       :dense="dense"
       nav
     >
-      <v-subheader v-if="group.groupTitle && !mini">
+      <template v-if="group.groupTitle && !mini">
-        {{ group.groupTitle }}
+        <v-list-group :prepend-icon="group.groupIcon" :value="false">
-      </v-subheader>
+          <template v-slot:activator>
+            <v-list-item-title>
+              <v-list-item-title>{{ group.groupTitle }}</v-list-item-title>
+            </v-list-item-title>
+          </template>
+          <v-list-item
+            v-for="(item, itemIndex) in group.items"
+            :key="itemIndex"
+            :to="item.route"
+            :disabled="item.disabled"
+            :exact="'exact' in item ? item.exact : true"
+          >
+            <v-list-item-icon>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list-group>
+      </template>
+      <template v-else>
         <v-list-item-group color="primary">
           <v-list-item
             v-for="(item, itemIndex) in group.items"
@@ -26,6 +47,7 @@
             </v-list-item-title>
           </v-list-item>
         </v-list-item-group>
+      </template>
     </v-list>
   </div>
 </template>

web/src/mixins/Nav.js

@@ -22,17 +22,18 @@ export default {
             title: 'Alterar minha senha',
             icon: 'mdi-form-textbox-password',
             route: { name: 'update-password' }
+          },
+          {
+            title: 'Meus dispositivos',
+            icon: 'mdi-cellphone-link',
+            route: { name: 'my-devices' },
+            disabled: true
           }
-          // {
-          //   title: 'Meus dispositivos',
-          //   icon: 'mdi-cellphone-link',
-          //   route: { name: 'my-devices' },
-          //   disabled: true
-          // }
         ]
       },
       {
         groupTitle: 'Ferramentas',
+        groupIcon: 'mdi-toolbox-outline',
         items: [
           {
             title: 'No campus agora',
@@ -50,6 +51,7 @@ export default {
       },
       {
         groupTitle: 'SERTI',
+        groupIcon: 'mdi-guy-fawkes-mask',
         items: [
           {
             title: 'Dispositivos Wi-Fi',
@@ -57,6 +59,13 @@ export default {
             route: { name: 'wifi-devices' },
             role: 'superAdmin'
           },
+          {
+            title: 'Access Points',
+            icon: 'mdi-access-point',
+            route: { name: 'wifi-devices' },
+            role: 'superAdmin',
+            disabled: true
+          },
           {
             title: 'Usuários Wi-Fi',
             icon: 'mdi-account-voice',
@@ -79,7 +88,7 @@ export default {
       },
       {
         groupTitle: 'Sistema',
-
+        groupIcon: 'mdi-application-cog',
         items: [
           {
             title: 'Administração',
@@ -110,6 +119,7 @@ export default {
 
         return {
           groupTitle: filteredGroupItems.length ? group.groupTitle : '',
+          groupIcon: filteredGroupItems.length ? group.groupIcon : '',
           items: filteredGroupItems
         }
       })