materio-d8/web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

<template lang="html">
  <div id="user-tools">
    <!-- <h4

    > -->
    <a class="mdi mdi-account" href="/user">
      <span>{{ name }}</span>
      <!-- <span v-else>{{ mail }}</span> -->
    </a>
    <!-- </h4> -->
    <a href="/admin/content/materials"
      v-if="isAdmin"
      class="mdi mdi-settings"
      title="admin"
    ></a>
    <a href="#"
      @click.prevent="onLogout()"
      class="mdi mdi-logout"
      title="logout"
    ></a>
    <UserFlags v-if="isAdherent"/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import UserFlags from 'vuejs/components/User/UserFlags'

export default {
  watch: {
  },
  components: {
    UserFlags
  },
  // data () {
  //   return {
  //     mail: "Hello User!"
  //   }
  // },
  computed: {
    ...mapState({
      mail: state => state.User.mail,
      name: state => state.User.name,
      isAdmin: state => state.User.isAdmin,
      isAdherent: state => state.User.isAdherent,
      flags: state => state.User.flags
    })
  },
  methods: {
    ...mapActions({
      userLogout: 'User/userLogout'
    }),
    onLogout () {
      console.log('UserTools onLogout')
      this.userLogout()
    }
  }
}
</script>

<style lang="css" scoped>
#user-tools{
  margin-right:0.2em;
  /* padding-right:0.5em; */
  /* border-right:1px solid #222; */
}
h4{
  margin:0;
  display:inline-block;
  font-size:inherited;
  vertical-align: top;
}
</style>