ProfileButton.vue

ProfileButton.vue

<template>
  <a href="#" class="flex-shrink-0 w-full group block">
    <div class="flex items-center">
      <div>
        <avatar
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=uNthX00zQD&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          alt="tom cook"
        />
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
          {{ user.name }}
        </p>
        <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
          View profile
        </p>
      </div>
    </div>
  </a>
</template>

<script>
import { mapGetters } from 'vuex'
import Avatar from '../simple/Avatar.vue'

export default {
  name: 'profile-button',

  components: { Avatar },

  computed: {
    ...mapGetters({
      user: 'user/getUser'
    })
  }
}
</script>