hrms-edm/Services/client/src/components/Profile.vue

<script setup lang="ts">
import { getUsername, logout } from '@/services/KeyCloakService'
import { ref } from 'vue'
const dropdownOpen = ref<boolean>(false)
const accountName = ref<string>(getUsername())
</script>

<template>
  <div
    @click="() => (dropdownOpen = !dropdownOpen)"
    class="row q-px-xs cursor"
    id="app-toolbar-title"
  >
    <div class="col">
      <q-avatar class="q-mt-xs">
        <img src="../assets/profile.png" />
      </q-avatar>
    </div>

    <div>
      <div class="row q-pl-sm">
        <span class="text-body1" style="font-size:13px">
          {{ accountName }}
        </span>
      </div>
      <div class="row q-pl-sm">
        <span class="text-caption text-grey" style="font-size:10px"> เจ้าหน้าที่ </span>
      </div>
    </div>
  </div>
  <q-btn-dropdown stretch flat v-model="dropdownOpen">
    <q-list>
      <q-item clickable v-close-popup tabindex="0" @click="() => logout()">
        <q-item-section avatar>
          <q-avatar icon="logout" color="primary" text-color="white" caption>
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>Logout</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</template>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
</style>