pedi2/resources/js/components/NavBar.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>
        <!-- Styles nombre del barrio-->
        <p class="navbar-item hide-below-1024">
          <slot name="gdc"></slot>
        </p>
        <p class="navbar-item">
          <slot name="subpedido"></slot>
        </p>
        <chismosa-dropdown v-if="this.$root.pedido != null" 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="this.$root.pedido != null" 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="this.$root.pedido != null" 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 './ChismosaDropdown.vue';
export default {
  components: { ChismosaDropdown },
  data() {
    return {
      burgerActiva: false,
      searchString: "",
    }
  },
  methods: {
    toggleBurger() {
      this.burgerActiva = !this.burgerActiva
    },
    buscar() {
      if (this.burgerActiva) this.toggleBurger()
      Event.$emit("migas-setear-como-inicio", this.$rootMiga)
      Event.$emit("filtrar-productos",'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>