buscar productos funcionando

public/js/app.js

@@ -2058,10 +2058,7 @@ __webpack_require__.r(__webpack_exports__);
     return {
       categorias: null,
       visible: true,
-      miga: {
+      miga: this.$rootMiga
-        nombre: "Categorías",
-        href: "/productos"
-      }
     };
   },
   mounted: function mounted() {
@@ -2071,11 +2068,14 @@ __webpack_require__.r(__webpack_exports__);
       _this.categorias = response.data;
     });
     Event.$emit("migas-setear-como-inicio", this.miga);
+    Event.$on("categoria-seleccionada", function (_) {
+      return _this.visible = false;
+    });
   },
   methods: {
     seleccionarCategoria: function seleccionarCategoria(categoria) {
       this.visible = false;
-      Event.$emit("categoria-seleccionada", categoria);
+      Event.$emit("categoria-seleccionada", 'categoria', categoria);
     }
   }
 });
@@ -2215,7 +2215,7 @@ __webpack_require__.r(__webpack_exports__);
   data: function data() {
     return {
       visible: false,
-      gdc: null,
+      gdc: this.$gdc,
       passwordVisible: false,
       passwordType: "password"
     };
@@ -2341,11 +2341,26 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
       isActive: false,
-      subpedido: null
+      subpedido: this.$pedido,
+      searchString: ""
     };
   },
   methods: {
@@ -2360,7 +2375,12 @@ __webpack_require__.r(__webpack_exports__);
       });
     },
     toggleChismosa: function toggleChismosa() {
+      if (this.isActive) this.toggleState();
       Event.$emit("toggle-chismosa");
+    },
+    buscar: function buscar() {
+      Event.$emit("migas-setear-como-inicio", this.$rootMiga);
+      Event.$emit("categoria-seleccionada", 'nombre', this.searchString);
     }
   },
   mounted: function mounted() {
@@ -3113,7 +3133,7 @@ __webpack_require__.r(__webpack_exports__);
     },
     agregarProducto: function agregarProducto() {
       if (this.cant < 0) alert("No se puede agregar cantidades negativas");else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros");else {
-        Event.$emit("sync-subpedido", this.cant, this.producto.id);
+        this.$settearProducto(this.cant, this.producto.id);
         this.cerrar();
       }
     }
@@ -3220,28 +3240,27 @@ __webpack_require__.r(__webpack_exports__);
     return {
       productos: [],
       visible: false,
-      categoria: null,
+      paginar: 150,
-      paginar: 150
+      valor: null,
+      filtro: null
     };
   },
   computed: {
     miga: function miga() {
       return {
-        nombre: this.categoria,
+        nombre: this.valor,
-        href: "#" + this.categoria
+        href: "#" + this.valor
       };
     }
   },
   mounted: function mounted() {
     var _this = this;
 
-    Event.$on('categoria-seleccionada', function (categoria) {
+    Event.$on('categoria-seleccionada', function (filtro, valor) {
-      _this.categoria = categoria;
+      _this.filtro = filtro;
+      _this.valor = valor;
       axios.get("/api/productos", {
-        params: {
+        params: _this.params(filtro, valor)
-          categoria: _this.categoria,
-          paginar: _this.paginar
-        }
       }).then(function (response) {
         _this.productos = response.data.data;
       });
@@ -3252,6 +3271,13 @@ __webpack_require__.r(__webpack_exports__);
   methods: {
     seleccionarProducto: function seleccionarProducto(producto) {
       Event.$emit("producto-seleccionado", producto);
+    },
+    params: function params(filtro, valor) {
+      var params = {
+        paginar: this.paginar
+      };
+      params[filtro] = valor;
+      return params;
     }
   }
 });
@@ -3542,7 +3568,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
 
 
 // module
-exports.push([module.i, "\np.navbar-item:empty {\n    display: none;\n}\n\n", ""]);
+exports.push([module.i, "\np.navbar-item:empty {\n  display: none;\n}\n@media (max-width: 1023px) {\n.invert-in-burger {\n    filter: invert(.5);\n}\n.margin-in-burger {\n    margin-left: .75rem;\n    margin-right: 1.5rem;\n}\n}\n", ""]);
 
 // exports
 
@@ -3561,7 +3587,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
 
 
 // module
-exports.push([module.i, "\n.breadcrumb a {\n\tcolor: #cc0f35;\n}\nnav.breadcrumb.is-fixed-top {\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\tz-index: 30;\n\ttop: 3.25rem;\n\theight: 3.25rem;\n}\n", ""]);
+exports.push([module.i, "\n.breadcrumb a {\n\tcolor: #cc0f35;\n}\nnav.breadcrumb.is-fixed-top {\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 3.25rem;\n\theight: 3.25rem;\n\tz-index: -10;\n}\n", ""]);
 
 // exports
 
@@ -5047,10 +5073,11 @@ var render = function () {
       _c(
         "div",
         { staticClass: "columns is-multiline is-mobile" },
-        _vm._l(_vm.categorias, function (catego) {
+        _vm._l(_vm.categorias, function (categoria, i) {
           return _c(
             "div",
             {
+              key: i,
               staticClass:
                 "block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
             },
@@ -5062,7 +5089,7 @@ var render = function () {
                   staticStyle: { height: "100%" },
                   on: {
                     "!click": function ($event) {
-                      return _vm.seleccionarCategoria(catego)
+                      return _vm.seleccionarCategoria(categoria)
                     },
                   },
                 },
@@ -5078,7 +5105,7 @@ var render = function () {
                         [
                           _c("p", {
                             staticClass: "title is-6",
-                            domProps: { textContent: _vm._s(catego) },
+                            domProps: { textContent: _vm._s(categoria) },
                           }),
                         ]
                       ),
@@ -5466,42 +5493,9 @@ var render = function () {
       _c("div", { staticClass: "navbar-brand" }, [
         _vm._m(0),
         _vm._v(" "),
-        _c(
+        _c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
-          "p",
-          { staticClass: "navbar-item", staticStyle: { margin: "0 auto" } },
-          [_vm._t("subpedido")],
-          2
-        ),
         _vm._v(" "),
-        _c(
+        _c("p", { staticClass: "navbar-item" }, [_vm._t("subpedido")], 2),
-          "a",
-          {
-            staticClass: "navbar-item",
-            attrs: { href: "#chismosa" },
-            on: {
-              "!click": function ($event) {
-                return _vm.toggleChismosa.apply(null, arguments)
-              },
-            },
-          },
-          [
-            _c("img", {
-              staticStyle: { padding: "0 0.3em" },
-              attrs: { src: "/assets/chismosa.png", height: "28" },
-            }),
-            _vm._v(" "),
-            _c("p", { staticStyle: { margin: "0 auto", color: "white" } }, [
-              _vm._v("$ "),
-              _c("span", {
-                domProps: {
-                  textContent: _vm._s(
-                    _vm.subpedido == null ? 0 : _vm.subpedido.total
-                  ),
-                },
-              }),
-            ]),
-          ]
-        ),
         _vm._v(" "),
         _c(
           "a",
@@ -5512,7 +5506,7 @@ var render = function () {
               role: "button",
               "aria-label": "menu",
               "aria-expanded": "false",
-              "data-target": "navbarBasicExample",
+              "data-target": "nav-bar",
             },
             on: { click: _vm.toggleState },
           },
@@ -5531,22 +5525,98 @@ var render = function () {
         {
           staticClass: "navbar-menu",
           class: { "is-active": _vm.isActive },
-          attrs: { id: "navbarBasicExample" },
+          attrs: { id: "nav-bar" },
         },
         [
-          _c(
+          _c("div", { staticClass: "navbar-end" }, [
+            _vm.subpedido.id != null
+              ? _c(
                   "div",
-            { staticClass: "navbar-start has-text-right-mobile" },
+                  {
+                    staticClass:
+                      "control mt-auto mb-auto has-icons-left margin-in-burger",
+                  },
                   [
-              _c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
+                    _c("input", {
+                      directives: [
+                        {
+                          name: "model",
+                          rawName: "v-model",
+                          value: _vm.searchString,
+                          expression: "searchString",
+                        },
+                      ],
+                      staticClass: "input is-small",
+                      attrs: { type: "text", placeholder: "Harina" },
+                      domProps: { value: _vm.searchString },
+                      on: {
+                        keyup: function ($event) {
+                          if (
+                            !$event.type.indexOf("key") &&
+                            _vm._k(
+                              $event.keyCode,
+                              "enter",
+                              13,
+                              $event.key,
+                              "Enter"
+                            )
+                          ) {
+                            return null
+                          }
+                          return _vm.buscar.apply(null, arguments)
+                        },
+                        input: function ($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.searchString = $event.target.value
+                        },
+                      },
+                    }),
                     _vm._v(" "),
-              _c(
+                    _vm._m(1),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm.subpedido.id != null
+              ? _c(
                   "a",
                   {
                     staticClass: "navbar-item",
+                    attrs: { href: "#chismosa" },
+                    on: {
+                      "!click": function ($event) {
+                        return _vm.toggleChismosa.apply(null, arguments)
+                      },
+                    },
+                  },
+                  [
+                    _vm._m(2),
+                    _vm._v(" "),
+                    _c("span", {
+                      domProps: {
+                        textContent: _vm._s(
+                          "$" +
+                            (_vm.subpedido == null ? 0 : _vm.subpedido.total)
+                        ),
+                      },
+                    }),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _c(
+              "div",
+              { staticClass: "block navbar-item" },
+              [
+                _c(
+                  "a",
+                  {
+                    staticClass: "button",
                     attrs: {
                       onclick:
-                      "event.preventDefault();\n            document.getElementById('logout-form').submit();",
+                        "event.preventDefault(); document.getElementById('logout-form').submit();",
                     },
                   },
                   [_vm._v("\n                Cerrar sesión\n            ")]
@@ -5556,6 +5626,7 @@ var render = function () {
               ],
               2
             ),
+          ]),
         ]
       ),
     ]
@@ -5572,6 +5643,29 @@ var staticRenderFns = [
       [_c("img", { attrs: { src: "/assets/logoMPS.png", height: "28" } })]
     )
   },
+  function () {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("span", { staticClass: "icon is-small is-left" }, [
+      _c("i", { staticClass: "fas fa-search" }),
+    ])
+  },
+  function () {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c(
+      "span",
+      { staticClass: "icon is-small mr-1", attrs: { id: "chismosa" } },
+      [
+        _c("img", {
+          staticClass: "invert-in-burger",
+          attrs: { src: "/assets/chismosa.png" },
+        }),
+      ]
+    )
+  },
 ]
 render._withStripped = true
 
@@ -6597,10 +6691,11 @@ var render = function () {
       _c(
         "div",
         { staticClass: "columns is-multiline is-mobile" },
-        _vm._l(_vm.productos, function (producto) {
+        _vm._l(_vm.productos, function (producto, i) {
           return _c(
             "div",
             {
+              key: i,
               staticClass:
                 "block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
             },
@@ -19219,12 +19314,33 @@ var files = __webpack_require__("./resources/js sync recursive \\.vue$/");
 files.keys().map(function (key) {
   return Vue.component(key.split('/').pop().split('.')[0], files(key)["default"]);
 });
+/**
+ * Global data
+ */
+
+Vue.prototype.$rootMiga = {
+  nombre: "Categorías",
+  href: "/productos"
+};
+Vue.prototype.$gdc = null;
+Vue.prototype.$pedido = {
+  id: null,
+  nombre: null,
+  grupo_de_compra_id: null,
+  created_at: null,
+  updated_at: null
+};
+
+Vue.prototype.$settearProducto = function (cantidad, id) {
+  Event.$emit("sync-subpedido", this.cant, this.producto.id);
+};
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
+
 var app = new Vue({
   el: '#root'
 });

resources/js/app.js

@@ -21,6 +21,21 @@ window.bulmaToast = require('bulma-toast');
 const files = require.context('./', true, /\.vue$/i)
 files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
 
+/**
+ * Global data
+ */
+Vue.prototype.$gdc = null
+Vue.prototype.$pedido = 
+  {id: null, nombre: null, grupo_de_compra_id: null, created_at: null, updated_at: null}
+Vue.prototype.$rootMiga = 
+  {nombre: "Categorías", href: "/productos"}
+
+/**
+ * Global methods
+ */
+Vue.prototype.$settearProducto = 
+  function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.id) }
+
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -30,3 +45,4 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(
 const app = new Vue({
     el: '#root'
 });
+

resources/js/components/CategoriasContainer.vue

@@ -1,12 +1,12 @@
 <template>
 	<div v-show="visible" class="container">
       <div class="columns is-multiline is-mobile">
-        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+        <div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
-          <div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
+          <div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
             <div class="card-content">
               <div class="media">
                 <div class="media-content" style="overflow:hidden">
-                  <p class="title is-6" v-text="catego"></p>
+                  <p class="title is-6" v-text="categoria"></p>
                 </div>
               </div>
             </div>
@@ -21,23 +21,20 @@
 		data() {
 		    return {
 		      categorias: null,
-		      visible: true,
+		      visible: true
-		      miga: {
-		        nombre: "Categorías",
-		        href: "/productos"
-		      }
 		    }
 		  },
 		  mounted() {
 		    axios.get("/api/categorias").then(response => {
 		      this.categorias = response.data;
 		    });
-		    Event.$emit("migas-setear-como-inicio",this.miga);
+		    Event.$emit("migas-setear-como-inicio", this.$rootMiga);
+			Event.$on("categoria-seleccionada", (_) => this.visible = false)
 		  },
 		  methods: {
 		    seleccionarCategoria(categoria) {
 		      this.visible = false;
-		      Event.$emit("categoria-seleccionada",categoria);
+		      Event.$emit("categoria-seleccionada",'categoria',categoria);
 		    }
 		  }
 	}

resources/js/components/Login.vue

@@ -28,7 +28,7 @@
 		data() {
 			return {
 				visible: false,
-				gdc: null,
+				gdc: this.$gdc,
 				passwordVisible: false,
 				passwordType: "password",
 			}

resources/js/components/NavBar.vue

@@ -1,33 +1,51 @@
 <template>
     <nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
+      
       <div class="navbar-brand">
         <a class="navbar-item" href="https://mps.org.uy">
           <img src="/assets/logoMPS.png" height="28">
         </a>
-        <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
+        <!-- Styles nombre del barrio-->
-        <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+        <p class="navbar-item">
-          <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
+          <slot name="gdc"></slot>
-          <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
+        </p>
-        </a>
+        <p class="navbar-item">
-        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
+          <slot name="subpedido"></slot>
+        </p>
+        
+        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
         </a>
       </div>
 
-      <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
+      <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
-        <div class="navbar-start has-text-right-mobile">
+        <div class="navbar-end">
-            <!-- Styles nombre del barrio-->
+
-            <p class="navbar-item"><slot name="gdc"></slot></p>
+            <div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
-            <a class="navbar-item"
+              <a class="button is-small" @click.capture="buscar">
-                onclick="event.preventDefault();
+                <span class="icon">
-                document.getElementById('logout-form').submit();">
+                  <i class="fas fa-search"></i>
+                </span>
+              </a>
+              <input class="input is-small" type="text" placeholder="Harina" v-model="searchString"  @keyup.enter="buscar" >
+            </div>
+
+            <a v-if="subpedido.id != null" class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+                <span class="icon is-small mr-1" id="chismosa">
+                  <img class="invert-in-burger" src="/assets/chismosa.png">
+                </span>
+                <span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
+            </a>
+            <div class="block navbar-item">
+                <a id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                     Cerrar sesión
                 </a>
                 <slot name="logout-form"></slot>
             </div>
         </div>
+      </div>
     </nav>
 </template>
 
@@ -36,25 +54,33 @@
         data() {
           return {
             isActive: false,
-                subpedido: null
+            subpedido: this.$pedido,
+            searchString: ""
           }
         },
         methods: {
           toggleState() {
-                this.isActive = !this.isActive;
+            this.isActive = !this.isActive
           },
           actualizarSubpedido(){
             axios.get("/api/subpedidos/" + this.subpedido.id)
                  .then(response => {
-              this.subpedido = response.data.data;
+                    this.subpedido = response.data.data
                   });
           },
           toggleChismosa(){
-          Event.$emit("toggle-chismosa");
+            if (this.isActive) this.toggleState()
+            Event.$emit("toggle-chismosa")
+          },
+          buscar() {
+            if (this.isActive) this.toggleState()
+            Event.$emit("migas-setear-como-inicio", this.$rootMiga)
+            Event.$emit("categoria-seleccionada",'nombre',this.searchString)
           }
-        }, mounted() {
+        }, 
+        mounted() {
           axios.get("/subpedidos/obtener_sesion").then(response => {
-          this.subpedido = response.data.subpedido;
+            this.subpedido = response.data.subpedido
             this.actualizarSubpedido()
           });
           //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
@@ -98,4 +124,17 @@ p.navbar-item:empty {
   display: none;
 }
 
+#nav-bar {
+  z-index: 10;
+}
+
+#cerrar-sesion {
+  color: inherit;
+}
+
+@media (max-width: 1023px) {
+  .invert-in-burger {
+    filter: invert(.5);
+  }
+}
 </style>

resources/js/components/NavMigas.vue

@@ -1,7 +1,12 @@
 <template>
-	<div class="notification">
+	<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
-		{{message}}
+		<ul class="mt-4">
-	</div>
+			<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
+				<a :href="miga.href" v-text="miga.nombre" 
+				   :class="{'has-text-danger': i != migaActiva}"></a>
+			</li>
+		</ul>
+	</nav>
 </template>
 
 <script>
@@ -14,6 +19,9 @@
 		  computed: {
 		    visible: function() {
 		      return this.migas.length > 0
+		    },
+			migaActiva: function() { 
+				return this.migas.length-1 
 			}
 		  },
 		  mounted() {
@@ -35,16 +43,12 @@
 </script>
 
 <style>
-.breadcrumb a {
-	color: #cc0f35;
-}
-
 nav.breadcrumb.is-fixed-top {
-	left: 0;
 	position: fixed;
+	left: 0;
 	right: 0;
-	z-index: 30;
 	top: 3.25rem;
-	height: 3.25rem;
+	height: 2.75rem;
+	z-index: 5;
 }
 </style>

resources/js/components/ProductoModal.vue

@@ -83,7 +83,7 @@
 		        if (this.cant < 0) alert("No se puede agregar cantidades negativas")
 		        else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros")
 		        else {
-		            Event.$emit("sync-subpedido", this.cant, this.producto.id);
+		            this.$settearProducto(this.cant, this.producto.id);
 		            this.cerrar();
 		        }
 		    }

resources/js/components/ProductosContainer.vue

@@ -1,7 +1,7 @@
 <template>
 	<div v-show="visible" class="container">
       <div class="columns is-multiline is-mobile">
-        <div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+        <div v-for="(producto,i) in productos" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
           <div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
             <div class="card-image">
               <figure class="image is-4by3">
@@ -30,32 +30,30 @@
 </template>
 
 <script>
-	export default {
+export default {
 	data() {
 	    return {
 	      productos: [],
 	      visible: false,
-	      categoria: null,
+	      paginar: 150,
-	      paginar: 150
+		  valor: null,
+	 	  filtro: null
 	    }
 	  },
 	  computed: {
 	    miga: function(){
 	      return {
-	        nombre: this.categoria,
+	        nombre: this.valor,
-	        href: "#" + this.categoria
+	        href: "#" + this.valor
 	      }
 	    }
 	  },
 	  mounted() {
-	    Event.$on('categoria-seleccionada', (categoria) =>  {
+	    Event.$on('categoria-seleccionada', (filtro,valor) =>  {
-	      this.categoria = categoria;
+		  this.filtro = filtro
-
+		  this.valor = valor
 	      axios.get("/api/productos", {
-	        params: {
+	        params: this.params(filtro,valor)
-	          categoria: this.categoria,
-	          paginar: this.paginar
-	        }
 	      }).then(response => {
 	        this.productos = response.data.data;
 	      });
@@ -66,6 +64,11 @@
 	  methods: {
 	    seleccionarProducto(producto) {
 	      Event.$emit("producto-seleccionado",producto);
+	    },
+		params: function(filtro,valor) {
+			let params = { paginar: this.paginar }
+			params[filtro] = valor
+			return params
 		}
 	  }
 	}

resources/views/layouts/app.blade.php

@@ -28,13 +28,7 @@
                 </form>
             </template>
         </nav-bar>
-        <nav-migas inline-template>
+        <nav-migas></nav-migas>
-            <nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
-              <ul>
-                <li v-for="(miga, i) in migas" v-bind:class="i==migas.length-1 ? 'is-active' : ''"><a :href="miga.href" v-text="miga.nombre"></a></li>
-              </ul>
-            </nav>
-        </nav-migas>
 
         <main id="main" class="py-4 has-top-padding">
             @yield('content')