public/js/app.js

@@ -2058,7 +2058,10 @@ __webpack_require__.r(__webpack_exports__);
     return {
       categorias: null,
       visible: true,
-      miga: this.$rootMiga
+      miga: {
+        nombre: "Categorías",
+        href: "/productos"
+      }
     };
   },
   mounted: function mounted() {
@@ -2068,14 +2071,11 @@ __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', categoria);
+      Event.$emit("categoria-seleccionada", categoria);
     }
   }
 });
@@ -2215,7 +2215,7 @@ __webpack_require__.r(__webpack_exports__);
   data: function data() {
     return {
       visible: false,
-      gdc: this.$gdc,
+      gdc: null,
       passwordVisible: false,
       passwordType: "password"
     };
@@ -2341,26 +2341,11 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
       isActive: false,
-      subpedido: this.$pedido,
+      subpedido: null
-      searchString: ""
     };
   },
   methods: {
@@ -2375,12 +2360,7 @@ __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() {
@@ -3133,7 +3113,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 {
-        this.$settearProducto(this.cant, this.producto.id);
+        Event.$emit("sync-subpedido", this.cant, this.producto.id);
         this.cerrar();
       }
     }
@@ -3240,27 +3220,28 @@ __webpack_require__.r(__webpack_exports__);
     return {
       productos: [],
       visible: false,
-      paginar: 150,
+      categoria: null,
-      valor: null,
+      paginar: 150
-      filtro: null
     };
   },
   computed: {
     miga: function miga() {
       return {
-        nombre: this.valor,
+        nombre: this.categoria,
-        href: "#" + this.valor
+        href: "#" + this.categoria
       };
     }
   },
   mounted: function mounted() {
     var _this = this;
 
-    Event.$on('categoria-seleccionada', function (filtro, valor) {
+    Event.$on('categoria-seleccionada', function (categoria) {
-      _this.filtro = filtro;
+      _this.categoria = categoria;
-      _this.valor = valor;
       axios.get("/api/productos", {
-        params: _this.params(filtro, valor)
+        params: {
+          categoria: _this.categoria,
+          paginar: _this.paginar
+        }
       }).then(function (response) {
         _this.productos = response.data.data;
       });
@@ -3271,13 +3252,6 @@ __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;
     }
   }
 });
@@ -3568,7 +3542,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
 
 
 // module
-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.push([module.i, "\np.navbar-item:empty {\n    display: none;\n}\n\n", ""]);
 
 // exports
 
@@ -3587,7 +3561,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\ttop: 3.25rem;\n\theight: 3.25rem;\n\tz-index: -10;\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\tz-index: 30;\n\ttop: 3.25rem;\n\theight: 3.25rem;\n}\n", ""]);
 
 // exports
 
@@ -5073,11 +5047,10 @@ var render = function () {
       _c(
         "div",
         { staticClass: "columns is-multiline is-mobile" },
-        _vm._l(_vm.categorias, function (categoria, i) {
+        _vm._l(_vm.categorias, function (catego) {
           return _c(
             "div",
             {
-              key: i,
               staticClass:
                 "block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
             },
@@ -5089,7 +5062,7 @@ var render = function () {
                   staticStyle: { height: "100%" },
                   on: {
                     "!click": function ($event) {
-                      return _vm.seleccionarCategoria(categoria)
+                      return _vm.seleccionarCategoria(catego)
                     },
                   },
                 },
@@ -5105,7 +5078,7 @@ var render = function () {
                         [
                           _c("p", {
                             staticClass: "title is-6",
-                            domProps: { textContent: _vm._s(categoria) },
+                            domProps: { textContent: _vm._s(catego) },
                           }),
                         ]
                       ),
@@ -5493,9 +5466,42 @@ var render = function () {
       _c("div", { staticClass: "navbar-brand" }, [
         _vm._m(0),
         _vm._v(" "),
-        _c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
+        _c(
+          "p",
+          { staticClass: "navbar-item", staticStyle: { margin: "0 auto" } },
+          [_vm._t("subpedido")],
+          2
+        ),
         _vm._v(" "),
-        _c("p", { staticClass: "navbar-item" }, [_vm._t("subpedido")], 2),
+        _c(
+          "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",
@@ -5506,7 +5512,7 @@ var render = function () {
               role: "button",
               "aria-label": "menu",
               "aria-expanded": "false",
-              "data-target": "nav-bar",
+              "data-target": "navbarBasicExample",
             },
             on: { click: _vm.toggleState },
           },
@@ -5525,98 +5531,22 @@ var render = function () {
         {
           staticClass: "navbar-menu",
           class: { "is-active": _vm.isActive },
-          attrs: { id: "nav-bar" },
+          attrs: { id: "navbarBasicExample" },
         },
         [
-          _c("div", { staticClass: "navbar-end" }, [
+          _c(
-            _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("input", {
+              _c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
-                      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(" "),
-                    _vm._m(1),
+              _c(
-                  ]
-                )
-              : _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(); document.getElementById('logout-form').submit();",
+                      "event.preventDefault();\n            document.getElementById('logout-form').submit();",
                   },
                 },
                 [_vm._v("\n            Cerrar sesión\n        ")]
@@ -5626,7 +5556,6 @@ var render = function () {
             ],
             2
           ),
-          ]),
         ]
       ),
     ]
@@ -5643,29 +5572,6 @@ 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
 
@@ -6691,11 +6597,10 @@ var render = function () {
       _c(
         "div",
         { staticClass: "columns is-multiline is-mobile" },
-        _vm._l(_vm.productos, function (producto, i) {
+        _vm._l(_vm.productos, function (producto) {
           return _c(
             "div",
             {
-              key: i,
               staticClass:
                 "block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
             },
@@ -19314,33 +19219,12 @@ 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,21 +21,6 @@ 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
@@ -45,4 +30,3 @@ Vue.prototype.$settearProducto =
 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="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
-          <div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
+          <div @click.capture="seleccionarCategoria(catego)" 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="categoria"></p>
+                  <p class="title is-6" v-text="catego"></p>
                 </div>
               </div>
             </div>
@@ -21,20 +21,23 @@
 		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.$rootMiga);
+		    Event.$emit("migas-setear-como-inicio",this.miga);
-			Event.$on("categoria-seleccionada", (_) => this.visible = false)
 		  },
 		  methods: {
 		    seleccionarCategoria(categoria) {
 		      this.visible = false;
-		      Event.$emit("categoria-seleccionada",'categoria',categoria);
+		      Event.$emit("categoria-seleccionada",categoria);
 		    }
 		  }
 	}

resources/js/components/Login.vue

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

resources/js/components/NavBar.vue

@@ -1,51 +1,33 @@
 <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>
+        <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+          <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
+          <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
+        </a>
+        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @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 class="navbar-start has-text-right-mobile">
             <!-- Styles nombre del barrio-->
-        <p class="navbar-item">
+            <p class="navbar-item"><slot name="gdc"></slot></p>
-          <slot name="gdc"></slot>
+            <a class="navbar-item"
-        </p>
+                onclick="event.preventDefault();
-        <p class="navbar-item">
+                document.getElementById('logout-form').submit();">
-          <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="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
-        <div class="navbar-end">
-
-            <div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
-              <a class="button is-small" @click.capture="buscar">
-                <span class="icon">
-                  <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>
 
@@ -54,33 +36,25 @@
         data() {
             return {
                 isActive: false,
-            subpedido: this.$pedido,
+                subpedido: null
-            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(){
-            if (this.isActive) this.toggleState()
+          Event.$emit("toggle-chismosa");
-            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
@@ -124,17 +98,4 @@ 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,12 +1,7 @@
 <template>
-	<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
+	<div class="notification">
-		<ul class="mt-4">
+		{{message}}
-			<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
+	</div>
-				<a :href="miga.href" v-text="miga.nombre" 
-				   :class="{'has-text-danger': i != migaActiva}"></a>
-			</li>
-		</ul>
-	</nav>
 </template>
 
 <script>
@@ -19,9 +14,6 @@
 		  computed: {
 		    visible: function() {
 		      return this.migas.length > 0
-		    },
-			migaActiva: function() { 
-				return this.migas.length-1 
 		    }
 		  },
 		  mounted() {
@@ -43,12 +35,16 @@
 </script>
 
 <style>
+.breadcrumb a {
+	color: #cc0f35;
+}
+
 nav.breadcrumb.is-fixed-top {
-	position: fixed;
 	left: 0;
+	position: fixed;
 	right: 0;
+	z-index: 30;
 	top: 3.25rem;
-	height: 2.75rem;
+	height: 3.25rem;
-	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 {
-		            this.$settearProducto(this.cant, this.producto.id);
+		            Event.$emit("sync-subpedido", 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,i) in productos" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+        <div v-for="producto in productos" 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,30 +30,32 @@
 </template>
 
 <script>
-export default {
+	export default {
 		data() {
 	    return {
 	      productos: [],
 	      visible: false,
-	      paginar: 150,
+	      categoria: null,
-		  valor: null,
+	      paginar: 150
-	 	  filtro: null
 	    }
 	  },
 	  computed: {
 	    miga: function(){
 	      return {
-	        nombre: this.valor,
+	        nombre: this.categoria,
-	        href: "#" + this.valor
+	        href: "#" + this.categoria
 	      }
 	    }
 	  },
 	  mounted() {
-	    Event.$on('categoria-seleccionada', (filtro,valor) =>  {
+	    Event.$on('categoria-seleccionada', (categoria) =>  {
-		  this.filtro = filtro
+	      this.categoria = categoria;
-		  this.valor = valor
+
 	      axios.get("/api/productos", {
-	        params: this.params(filtro,valor)
+	        params: {
+	          categoria: this.categoria,
+	          paginar: this.paginar
+	        }
 	      }).then(response => {
 	        this.productos = response.data.data;
 	      });
@@ -64,11 +66,6 @@ export default {
 	  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,7 +28,13 @@
                 </form>
             </template>
         </nav-bar>
-        <nav-migas></nav-migas>
+        <nav-migas inline-template>
+            <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')