Color Changes

Login Changes
Misc

spaces/app.vue

@@ -3,6 +3,7 @@
 
 
 const user = useSupabaseUser()
+console.log(user)
 const router = useRouter()
 const route = useRoute()
 const supabase = useSupabaseClient()
@@ -142,6 +143,32 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+const items = [
+  [{
+    label: user.value ? user.value.email : "",
+    slot: 'account',
+    disabled: true
+  }], [{
+    label: 'Settings',
+    icon: 'i-heroicons-cog-8-tooth'
+  }], [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open'
+  }, {
+    label: 'Changelog',
+    icon: 'i-heroicons-megaphone'
+  }, {
+    label: 'Status',
+    icon: 'i-heroicons-signal'
+  }], [{
+    label: 'Sign out',
+    icon: 'i-heroicons-arrow-left-on-rectangle',
+    click: () => {
+      supabase.auth.signOut()
+      router.push("/login")
+    }
+  }]
+]
 
 </script>
 
@@ -150,8 +177,28 @@ useSeoMeta({
     <template #logo>
       spaces.software
     </template>
-    <template #right>
+    <template #right  v-if="user">
       <UColorModeButton/>
+      <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+
+        <template #account="{ item }">
+          <div class="text-left">
+            <p>
+              Signed in as
+            </p>
+            <p class="truncate font-medium text-gray-900 dark:text-white">
+              {{ item.label }}
+            </p>
+          </div>
+        </template>
+
+        <template #item="{ item }">
+          <span class="truncate">{{ item.label }}</span>
+
+          <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+        </template>
+      </UDropdown>
     </template>
   </UHeader>
   <div class="m-3" id="contentContainer">