<template>
  <button
    type="button"
    class="inline-flex items-center relative px-2 dark:border-gray-500 border-2 rounded-full hover:shadow-lg focus:outline-none focus:ring-2 transition-shadow"
    aria-label="User menu"
  >
    <fa icon="bars" class="ml-2 text-gray-500" />

    <div class="flex items-center h-10 w-10 pl-3">
      <img v-if="user" :src="user.avatar_url" class="rounded-full" />
      <fa v-else icon="user-circle" class="text-3xl" />
    </div>
  </button>
</template>

<script>
export default {
  name: 'LayoutHeaderMenuAvatar',
  data() {
    return {
      user: null,
    }
  },
  mounted() {
    if (localStorage.getItem('netlify-cms-user')) {
      this.user = JSON.parse(localStorage.getItem('netlify-cms-user'))
    }
  },
}
</script>