<template lang="html"> <div id="user-tools"> <!-- <h4 > --> <a class="mdi mdi-account" href="/user"> <span>{{ mail }}</span> </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.2em; /* padding-right:0.5em; */ /* border-right:1px solid #222; */ } h4{ margin:0; display:inline-block; font-size:inherited; vertical-align: top; } </style>