64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { getUsername, logout } from '@/services/KeyCloakService'
|
|
import { ref } from 'vue'
|
|
const dropdown = ref<boolean>(false)
|
|
const name = ref<string>(getUsername())
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
@click="() => (dropdown = !dropdown)"
|
|
class="row q-px-xs cursor"
|
|
id="app-toolbar-title"
|
|
>
|
|
<div class="col">
|
|
<q-avatar class="q-mt-xs hideprofile">
|
|
<img src="../assets/profile.png" />
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="row q-pl-sm">
|
|
<span class="text-body1" style="font-size: 13px">
|
|
{{ name }}
|
|
</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="dropdown">
|
|
<q-list>
|
|
<q-item clickable v-close-popup tabindex="0" @click="() => logout()">
|
|
<q-item-section avatar>
|
|
<q-avatar
|
|
caption
|
|
icon="logout"
|
|
color="primary"
|
|
text-color="white"
|
|
size="1.5rem"
|
|
>
|
|
</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>
|
|
@media only screen and (max-width: 450px) {
|
|
.hideprofile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|