From 2d519f7ca9e5415ca5f71ff58663b084fea1ad80 Mon Sep 17 00:00:00 2001
From: sinergia <alejandro.ayala@onecluster.org>
Date: Fri, 4 Oct 2024 20:39:53 -0500
Subject: [PATCH 1/2] Feat: Se agrega barra de Navegacion

---
 .../frontend/don-confiao/src/App.vue          | 37 +++++++++++++++++--
 .../don-confiao/src/components/Purchase.vue   | 15 --------
 .../frontend/don-confiao/src/pages/index.vue  |  2 +-
 .../frontend/don-confiao/src/router/index.js  |  1 +
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
index 2caa78e..c0f5422 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
@@ -1,11 +1,40 @@
 <template>
   <v-app>
-    <v-main>
+      <NavBar />
       <router-view />
-    </v-main>
   </v-app>
 </template>
 
-<script setup>
-  //
+<script>
+ import NavBar from './components/NavBar.vue';
+
+ export default {
+   name: 'App',
+   components: {
+     NavBar,
+   },
+ }
 </script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav {
+  padding: 30px;
+}
+
+nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index a4ed66e..01dfc74 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -1,17 +1,4 @@
 <template>
-  <v-app>
-    <v-navigation-drawer app>
-      <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>
-
-    <v-app-bar app>
-      <v-toolbar-title>Compra</v-toolbar-title>
-    </v-app-bar>
-    <v-main>
     <v-container>
       <v-form ref="form" v-model="valid">
         <v-text-field
@@ -103,8 +90,6 @@
         <v-btn @click="submit" color="green">Comprar</v-btn>
       </v-form>
     </v-container>
-    </v-main>
-  </v-app>
 </template>
 
 <script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
index b0efda0..124c4fe 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/index.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  //
+//
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
index 5d4b8bc..4e2db62 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/router/index.js
@@ -1,3 +1,4 @@
+
 /**
  * router/index.ts
  *

From d00f3e60fd439a5b6353db43e6314aa702fcb7bb Mon Sep 17 00:00:00 2001
From: Rodia <alejandro.ayala@onecluster.org>
Date: Sat, 5 Oct 2024 10:38:25 -0500
Subject: [PATCH 2/2] Fix: Archivo Faltante NavBar

---
 .../frontend/don-confiao/src/App.vue          |  6 +-
 .../don-confiao/src/components/NavBar.vue     | 64 +++++++++++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
index c0f5422..163155a 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
@@ -1,7 +1,9 @@
 <template>
   <v-app>
-      <NavBar />
-      <router-view />
+      <v-main>
+          <NavBar />
+          <router-view />
+      </v-main>
   </v-app>
 </template>
 
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
new file mode 100644
index 0000000..f84e6d8
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -0,0 +1,64 @@
+<template>
+    <v-main>
+    <v-card>
+        <v-layout>
+            <v-app-bar color="primary" prominent app>
+                <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+                <v-toolbar-title>My files</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 :items="items"></v-list>
+      </v-navigation-drawer>
+
+      <v-main style="height: 500px;">
+          <v-card-text>
+              The navigation drawer will appear from the bottom on smaller size screens.
+          </v-card-text>
+      </v-main>
+    </v-layout>
+    </v-card>
+    </v-main>
+</template>
+<script>
+ export default {
+     data: () => ({
+         drawer: false,
+         group: null,
+         items: [
+             {
+                 title: 'Foo',
+                 value: 'foo',
+             },
+             {
+                 title: 'Bar',
+                 value: 'bar',
+             },
+             {
+                 title: 'Fizz',
+                 value: 'fizz',
+             },
+             {
+                 title: 'Buzz',
+                 value: 'buzz',
+             },
+         ],
+     }),
+
+     watch: {
+         group () {
+             this.drawer = false
+         },
+     },
+ }
+</script>