pcpuma-front/src/layout/Header.vue

<template lang="pug">
  .navbar.is-u-blue
    .navbar-brand
      router-link.navbar-item(to="/") 
        b PC PUMA
    .navbar-menu
      .navbar-start 
        router-link.navbar-item(to="/equipo") Equipo
        router-link.navbar-item(to="/carrito") Carrito
        router-link.navbar-item(to="/usuario") Usuarios
        router-link.navbar-item(to="/multa") Multas
      .navbar-end
        .navbar-item
          p {{`Bienvenido : ${this.usuario}`}}
          span.tag.is-danger.is-medium(v-if=" env === 'development' ") Localhost
          span.tag.is-danger.is-medium(v-else-if=" env === 'TEST' ") Test
        .navbar-item
          a.button.is-u-golden(v-on:click='salir()')
            strong Salir
</template>
<script>
export default {
  data () {
    return {
      env: process.env.NODE_ENV,
      usuario: this.$store.getters.operador
    }
  },
  methods: {
    salir: function () {
      this.$store.commit('close')
      this.$router.push('login')
    }
  }
}
</script>
<style lang="scss" scoped>
  .navbar{
    width: 100%;
    border-bottom: #B08100 solid 5px;
    box-shadow: 0px 13px 21px 2px rgba(0,0,0,0.21);
    position:fixed;
    top:0;

  }
</style>