From 80ef5c4d9dbb59819f0f3cb5844594c544496958 Mon Sep 17 00:00:00 2001
From: Rodia <alejandro.ayala@onecluster.org>
Date: Sat, 5 Oct 2024 12:07:41 -0500
Subject: [PATCH] Fix: Barra de Navegacion

---
 .../don-confiao/src/components/NavBar.vue     | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
index aabdd7e..135614e 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -1,5 +1,23 @@
 <template>
-
+  <v-app-bar color="primary" prominent>
+    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <v-toolbar-title>Menu</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <template v-if="$vuetify.display.mdAndUp">
+      <v-btn icon="mdi-magnify" variant="text"></v-btn>
+      <v-btn icon="mdi-filter" variant="text"></v-btn>
+    </template>
+    <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+  </v-app-bar>
+  <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-navigation-drawer>
 </template>
 
 <script>
@@ -7,30 +25,21 @@
      data: () => ({
          drawer: false,
          group: null,
-         items: [
-             {
-                 title: 'Foo',
-                 value: 'foo',
-             },
-             {
-                 title: 'Bar',
-                 value: 'bar',
-             },
-             {
-                 title: 'Fizz',
-                 value: 'fizz',
-             },
-             {
-                 title: 'Buzz',
-                 value: 'buzz',
-             },
+         menuItems: [
+             { title: 'Inicio', route: '/'},
+             { title: 'Comprar', route:'/comprar'},
+             { title: 'Resumen de Compra', route:'/resumen_compra'},
          ],
      }),
-
      watch: {
          group () {
              this.drawer = false
          },
      },
+     methods: {
+         navigate(route) {
+             this.$router.push(route);
+         },
+     }
  }
 </script>