80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
const { isHelpSlideoverOpen } = useDashboard()
|
|
const { isDashboardSearchModalOpen } = useUIState()
|
|
const { metaSymbol } = useShortcuts()
|
|
const user = useSupabaseUser()
|
|
const dataStore = useDataStore()
|
|
const supabase = useSupabaseClient()
|
|
const router = useRouter()
|
|
|
|
const items = computed(() => [
|
|
[{
|
|
slot: 'account',
|
|
label: '',
|
|
disabled: true
|
|
}], [{
|
|
label: 'Suche',
|
|
icon: 'i-heroicons-command-line',
|
|
shortcuts: [metaSymbol.value, 'K'],
|
|
click: () => {
|
|
isDashboardSearchModalOpen.value = true
|
|
}
|
|
}, {
|
|
label: 'Hilfe & Support',
|
|
icon: 'i-heroicons-question-mark-circle',
|
|
shortcuts: ['?'],
|
|
click: () => isHelpSlideoverOpen.value = true
|
|
}], [{
|
|
label: 'Webseite',
|
|
icon: 'i-heroicons-book-open',
|
|
to: 'https://fedeo.de',
|
|
target: '_blank'
|
|
},/* {
|
|
label: 'GitHub repository',
|
|
icon: 'i-simple-icons-github',
|
|
to: 'https://github.com/nuxt/ui-pro',
|
|
target: '_blank'
|
|
}, {
|
|
label: 'Buy Nuxt UI Pro',
|
|
icon: 'i-heroicons-credit-card',
|
|
to: 'https://ui.nuxt.com/pro/purchase',
|
|
target: '_blank'
|
|
}*/], [{
|
|
label: 'Abmelden',
|
|
icon: 'i-heroicons-arrow-left-on-rectangle',
|
|
click: async () => {
|
|
await supabase.auth.signOut()
|
|
await dataStore.clearStore()
|
|
await router.push('/login')
|
|
|
|
}
|
|
}]
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
|
|
<template #default="{ open }">
|
|
<UButton color="gray" variant="ghost" class="w-full" :label="dataStore.activeProfile.fullName" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
|
|
<template #leading>
|
|
<UAvatar :alt="dataStore.activeProfile ? dataStore.activeProfile.fullName : ''" size="xs" />
|
|
</template>
|
|
|
|
<template #trailing>
|
|
<UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
|
|
</template>
|
|
</UButton>
|
|
</template>
|
|
|
|
<template #account>
|
|
<div class="text-left">
|
|
<p>
|
|
Angemeldet als
|
|
</p>
|
|
<p class="truncate font-medium text-gray-900 dark:text-white">
|
|
{{dataStore.activeProfile.email}}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UDropdown>
|
|
</template> |