2. Zwischenstand

frontend/components/UserDropdown.vue

@@ -1,55 +1,44 @@
 <script setup>
-
-const { isHelpSlideoverOpen } = useDashboard()
 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',
+const userItems = computed(() => [[
+  {
+    label: 'Passwort aendern',
     icon: 'i-heroicons-shield-check',
-    to: `/password-change`
-  },{
+    to: '/password-change'
+  },
+  {
     label: 'Abmelden',
     icon: 'i-heroicons-arrow-left-on-rectangle',
-    click: async () => {
+    onSelect: 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="slotProps">
-      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[slotProps?.open && 'bg-gray-50 dark:bg-gray-800']">
-<!--        <template #leading>
-          <UAvatar :alt="auth.user.email"  size="xs" />
-        </template>-->
+  <UDropdownMenu
+    :items="userItems"
+    :content="{ align: 'start', side: 'top', sideOffset: 8 }"
+    :ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
+    class="block w-full"
+  >
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+        :class="[open && 'bg-gray-100 dark:bg-gray-800']"
+      >
+        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+          {{ auth.user.email }}
+        </span>
 
         <template #trailing>
-          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
+          <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
         </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>
+  </UDropdownMenu>
 </template>