Added Frontend

frontend/components/UserDropdown.vue

@@ -0,0 +1,62 @@
+<script setup>
+
+const { isHelpSlideoverOpen } = useDashboard()
+const { isDashboardSearchModalOpen } = useUIState()
+const { metaSymbol } = useShortcuts()
+const user = useSupabaseUser()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+const router = useRouter()
+const auth = useAuthStore()
+
+const items = computed(() => [
+  [{
+    slot: 'account',
+    label: '',
+    disabled: true
+  }],  [/*{
+    label: 'Mein Profil',
+    icon: 'i-heroicons-user',
+    to: `/profiles/show/${profileStore.activeProfile.id}`
+  },*/{
+    label: 'Passwort ändern',
+    icon: 'i-heroicons-shield-check',
+    to: `/password-change`
+  },{
+    label: 'Abmelden',
+    icon: 'i-heroicons-arrow-left-on-rectangle',
+    click: async () => {
+      await auth.logout()
+
+    }
+  }]
+])
+</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="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+<!--        <template #leading>
+          <UAvatar :alt="auth.user.email"  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">
+          {{auth.user.email}}
+        </p>
+      </div>
+    </template>
+  </UDropdown>
+</template>