<template>
  <div>
    <v-badge
      color="accent"
      dot
      overlap
      class="mx-4"
      :value="$store.getters.hasUnreadNotifications"
    >
      <v-avatar size="50" class="secondary has-outline">
        <img
          :src="$auth.user.image.thumb || noImage"
          :alt="$auth.user.fullName"
        />
      </v-avatar>
    </v-badge>
    <small v-if="displayName" class="font-weight-bold txt--text">{{
      $auth.user.fullName
    }}</small>
  </div>
</template>

<script>


export default {  
  props: {
    displayName: {
      type: Boolean,
      default: false,
    },
  },
  computed: {    
    noImage() {
      return require(`@/assets/img/no_image.png`)
    },
  }
}
</script>

<style scoped>
.has-outline {
  box-shadow: 0 0 0 3px #eef7f9;
}
</style>
