#12 style(Navbar): add icions and separete admin actions.

src/components/NavBar.vue

@@ -12,11 +12,30 @@
   <v-navigation-drawer v-model="drawer"
                        :location="$vuetify.display.mobile ? 'bottom' : undefined"
                        temporary>
-      <v-list>
-          <v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)">
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item>
-      </v-list>
+    <v-list
+      density="compact"
+      nav
+    >
+      <v-list-item
+        v-for="item in menuItems"
+        :key="item.title"
+        :title="item.title"
+        :prepend-icon="item.icon"
+        @click="navigate(item.route)"
+      ></v-list-item>
+      <v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()"></v-list-item>
+      <v-list-item>
+        <v-list v-if="showAdminMenu">
+          <v-list-item
+            v-for="item in menuAdminItems"
+            :key="item.title"
+            :title="item.title"
+            :prepend-icon="item.icon"
+            @click="navigateAdmin(item.route)"
+          ></v-list-item>
+        </v-list>
+      </v-list-item>
+    </v-list>
   </v-navigation-drawer>
 </template>
 
@@ -26,13 +45,16 @@
      data: () => ({
          drawer: false,
          group: null,
+         showAdminMenu: false,
          menuItems: [
-             { title: 'Inicio', route: '/'},
-             { title: 'Comprar', route:'/comprar'},
-             { title: 'Cuadrar tarro', route: '/cuadrar_tarro'},
-             { title: 'Cuadres de tarro', route: '/cuadres_de_tarro'},
-             { title: 'CSV Tryton', route: '/ventas_para_tryton'},
-             { title: 'Compra adm', route: '/compra_admin'},
+             { title: 'Inicio', route: '/', icon: 'mdi-home'},
+             { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
+         ],
+         menuAdminItems: [
+             { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},
+             { title: 'Cuadres de tarro', route: '/cuadres_de_tarro', icon: 'mdi-chart-bar'},
+             { title: 'CSV Tryton', route: '/ventas_para_tryton', icon: 'mdi-file-table'},
+             { title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
          ],
      }),
      watch: {
@@ -44,6 +66,13 @@
          navigate(route) {
              this.$router.push(route);
          },
+         navigateAdmin(route) {
+             this.toggleAdminMenu();
+             this.navigate(route);
+         },
+         toggleAdminMenu() {
+             this.showAdminMenu = !this.showAdminMenu;
+         },
      }
- }
+  }
 </script>