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
        router-link.navbar-item(v-if="$store.getters.permiso" to="/bans") Blacklist
      .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.usuario
    };
  },
  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>