thats-me/frontend/_src/components/UserMenuButton.vue
2026-04-22 12:57:10 +02:00

32 lines
644 B
Vue

<template>
<button class="user-menu-btn glass--button" @click="$emit('openMenu')">
<q-icon name="person_outline" size="22px" :color="isDark ? 'white' : 'grey-8'" />
</button>
</template>
<script setup>
import { computed } from 'vue'
import { useQuasar } from 'quasar'
defineEmits(['openMenu'])
const $q = useQuasar()
const isDark = computed(() => $q.dark.isActive)
</script>
<style scoped>
.user-menu-btn {
position: fixed;
top: 16px;
left: 16px;
z-index: 30;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
</style>