Rebuild General Layout to Nuxt UI PRO Dashboard

spaces/components/UserDropdown.vue

@@ -0,0 +1,84 @@
+<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: 'Settings',
+    icon: 'i-heroicons-cog-8-tooth',
+    to: '/settings'
+  }, {
+    label: 'Command menu',
+    icon: 'i-heroicons-command-line',
+    shortcuts: [metaSymbol.value, 'K'],
+    click: () => {
+      isDashboardSearchModalOpen.value = true
+    }
+  }, {
+    label: 'Help & Support',
+    icon: 'i-heroicons-question-mark-circle',
+    shortcuts: ['?'],
+    click: () => isHelpSlideoverOpen.value = true
+  }], [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: 'https://ui.nuxt.com/pro/guide',
+    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.getProfileById(user.id).fullName" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+        <template #leading>
+          <UAvatar :alt="dataStore.getProfileById(user.id) ? dataStore.getProfileById(user.id).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.getProfileById(user.id).email}}
+        </p>
+      </div>
+    </template>
+  </UDropdown>
+</template>