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

<template lang="html">
  <div id="user-tools">
    <h4
      class="mdi mdi-account"
    >
    <a href="/user">
      {{ mail }}
    </a>
    </h4>
    <a href="/admin/content/materials"
      v-if="isAdmin"
      class="mdi mdi-settings"
      title="admin"
    ></a>
    <a href="/user/logout"
      @click.prevent="onLogout()"
      class="mdi mdi-logout"
      title="logout"
    ></a>
    <UserFlags/>
  </div>
</template>

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

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

export default {
  components: {
    UserFlags
  },
  // data () {
  //   return {
  //     mail: "Hello User!"
  //   }
  // },
  computed: {
    ...mapState({
      mail: state => state.User.mail,
      isAdmin: state => state.User.isAdmin,
      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.5em;
  /* padding-right:0.5em; */
  /* border-right:1px solid #222; */
}
h4{
  margin:0;
  display:inline-block;
  font-size:inherited;
  vertical-align: top;
}
</style>