pedi2/resources/js/components/comunes/NavBar.vue

70 lines
2.6 KiB
Vue

<template>
<nav id="nav-bar"
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" alt="Logo del MPS">
</a>
<pedidos-nav-bar-brand v-if="rol === 'barrio'"/>
<ollas-nav-bar-brand v-else-if="rol === 'ollas'"/>
<admin-nav-bar-brand v-else-if="rol === 'admin_barrio'"/>
<comisiones-nav-bar-brand v-else/>
<burger/>
</div>
<div class="navbar-menu" :class="{'is-active': burger_activa}">
<div class="navbar-start is-flex is-justify-content-center is-flex-grow-1">
<div v-if="mostrarAviso" class="is-flex is-align-items-center navbar-item">
<span class="tag is-warning is-size-6">
Monto superado
</span>
</div>
</div>
<div class="navbar-end">
<buscador v-if="pedidoDefinido"/>
<chismosa-dropdown v-if="pedidoDefinido"
class="hide-below-1024"
ariaControls="wide"/>
<div class="block navbar-item">
<a @click="logOut" class="text-a">
Cerrar sesión
</a>
</div>
</div>
</div>
</nav>
</template>
<script>
import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
import { mapGetters, mapState } from "vuex";
import PedidosNavBarBrand from "../pedidos/PedidosNavBarBrand.vue";
import ComisionesNavBarBrand from "../comisiones/ComisionesNavBarBrand.vue";
import AdminNavBarBrand from "../admin/AdminNavBarBrand.vue";
import OllasNavBarBrand from "../ollas/OllasNavBarBrand.vue";
import Buscador from "../pedidos/Buscador.vue";
import Burger from "./Burger.vue";
export default {
components: { Burger, Buscador, OllasNavBarBrand, AdminNavBarBrand, ComisionesNavBarBrand, PedidosNavBarBrand, ChismosaDropdown },
computed: {
...mapGetters('pedido', ["pedidoDefinido"]),
...mapGetters('ollas', ["montoSuperado"]),
...mapState('login', ["rol"]),
...mapState('ui', ["burger_activa"]),
mostrarAviso() {
return this.pedidoDefinido && this.rol === 'ollas' && this.montoSuperado;
}
},
methods: {
logOut() {
event.preventDefault();
document.getElementById('logout-form').submit();
},
}
};
</script>
<style>
</style>