pedi2/resources/js/components/pedidos/NavMigas.vue

39 lines
981 B
Vue

<template>
<nav v-if="pedidoDefinido" class="breadcrumb is-centered has-background-danger-light is-fixed-top"
aria-label="breadcrumbs" v-show="visible">
<ul class="mt-4">
<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>
import { mapGetters, mapState } from "vuex";
export default {
computed: {
...mapState('ui',["migas","miga_inicial"]),
...mapGetters('pedido',["pedidoDefinido"]),
visible() {
return this.migas.length > 0
},
migaActiva() {
return this.migas.length - 1
}
},
}
</script>
<style>
nav.breadcrumb.is-fixed-top {
position: fixed;
left: 0;
right: 0;
top: 3.25rem;
height: 2.75rem;
z-index: 5;
}
</style>