<template>
  <div v-if="user" class="user-popover">
    {{ user.displayedName }}
    <ly-button type="ghost" @click="logout">
      {{ $t('users.popover.logout') }}
    </ly-button>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters({
        user: 'users/current',
      }),
    },

    methods: {
      logout () {
        this.$store.dispatch('users/logout')
        window.location = '/'
      },
    },
  }
</script>

<template>
  <ly-popover v-if="user">
    <ly-button
      slot="toggle"
      type="ghost"
      icon="user"
    >
      {{ user.displayedName }}
    </ly-button>

    <template slot="menu">
      <ly-popover-item @click="logout">
        {{ $t('users.popover.logout') }}
        <ly-icon name="sign-out" class="float-right"></ly-icon>
      </ly-popover-item>
    </template>
  </ly-popover>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters({
        user: 'users/current',
      }),
    },

    methods: {
      logout () {
        this.$store.dispatch('users/logout')
        window.location = '/'
      },
    },
  }
</script>

<style scoped>
  .ly-icon.float-right {
    float: right;
  }
</style>

Prepare app header to accept link to profile
Prepare app header to accept link to profile
