<template>
  <div class="vue-user-ribon--wrap" aria-hidden="true">
    <p>Vous êtres connecté <strong>{{username}}</strong>.</p>
    <avatar :username="this.username" :src="this.pathToImage"/>
    <img src="icons/logout.svg" height="40"/>
  </div>
</template>


<script>
// @ is an alias to /src
import Avatar from '@/components/Avatar.vue'

export default {
  name: 'UserRibbon',
  props: {
    username: {
      type: String
    },
    
    pathToImage: {
      type: String
    }
  },
  components: {
    Avatar
  }
}
</script>

<style>
.vue-user-ribon--wrap{
    display: flex;
    right: 0;
    position: absolute;
}

.vue-user-ribon--wrap *{
    align-self: center;
    margin: 5px;
}
.vue-user-ribon--wrap strong{
    margin: 0;
}
p{
    
    color: white;
}
</style>