109 lines
3.4 KiB
Vue
109 lines
3.4 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">
|
|
</a>
|
|
<div class="navbar-item" id="datos-pedido" v-if="pedidoDefinido">
|
|
<p class="hide-below-1024">
|
|
{{ `Núcleo: ${nombre} - Barrio: ${grupo_de_compra}` }}
|
|
</p>
|
|
</div>
|
|
<chismosa-dropdown
|
|
v-if="pedidoDefinido"
|
|
class="hide-above-1023"
|
|
id="mobile">
|
|
</chismosa-dropdown>
|
|
<a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu"
|
|
aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<div class="navbar-menu" :class="{'is-active':burgerActiva}">
|
|
<div class="navbar-end">
|
|
<div v-if="pedidoDefinido" class="navbar-item field has-addons mt-2 mr-3">
|
|
<a class="button is-small has-text-dark-grey" @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>
|
|
<chismosa-dropdown
|
|
v-if="pedidoDefinido"
|
|
class="hide-below-1024"
|
|
id="wide">
|
|
</chismosa-dropdown>
|
|
<div class="block navbar-item">
|
|
<a onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
|
|
class="text-a">
|
|
Cerrar sesión
|
|
</a>
|
|
<slot name="logout-form"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
|
|
import { mapActions, mapGetters, mapState } from "vuex";
|
|
|
|
export default {
|
|
components: { ChismosaDropdown },
|
|
data() {
|
|
return {
|
|
burgerActiva: false,
|
|
searchString: "",
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('pedido', ["pedidoDefinido"]),
|
|
...mapState('pedido',["nombre"]),
|
|
...mapState('barrio',["grupo_de_compra"]),
|
|
},
|
|
methods: {
|
|
...mapActions('productos', ["filtrarProductos"]),
|
|
toggleBurger() {
|
|
this.burgerActiva = !this.burgerActiva
|
|
},
|
|
buscar() {
|
|
if (this.burgerActiva)
|
|
this.toggleBurger();
|
|
this.filtrarProductos({ filtro: "nombre", valor: this.searchString });
|
|
Event.$emit('migas-agregar', { nombre: this.searchString });
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
|
|
p.navbar-item:empty {
|
|
display: none;
|
|
}
|
|
|
|
#nav-bar {
|
|
z-index: 10;
|
|
}
|
|
|
|
.text-a {
|
|
color: inherit;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.hide-below-1024 {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.hide-above-1023 {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|