LayoutHeaderMenuAvatar.vue

<template functional>
  <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">
      <fa icon="user-circle" class="text-3xl" />
    </div>
  </button>
</template>

<script>
export default {
  name: 'LayoutHeaderMenuAvatar',
}
</script>