<template>
  <div class="row items-center">
    <span>{{ username }}</span>
    <q-avatar class="avatar row content-center justify-center">
      <q-icon class="icon submenu-text" name="person"/>
    </q-avatar>
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    username: {
      required: true,
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
  span {
    margin-right: 10px;
    color: #fff;
    font-size: 1.3em;
  }

  .avatar {
    border: 2px solid #fff;
    color: #fff;
    font-size: 3em;
  }

  .avatar:hover {
    color: $yellow-orange-color-wheel;
    background-color: #fff;
  }
</style>