Restructured Project Rep

pages/settings/index.vue

@@ -0,0 +1,91 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const router = useRouter()
+
+const items = [{
+  label: 'Profil',
+},{
+  label: 'Projekte',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'E-Mail',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Dokumente'
+}]
+
+const colorMode = useColorMode()
+const isLight = computed({
+  get() {
+    return colorMode.value !== 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Einstellungen">
+
+  </UDashboardNavbar>
+  <UTabs
+      :items="items"
+      class="h-100 p-5"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Profil'">
+
+          <UDivider
+              class="my-3"
+              label="Profil"
+          />
+
+          <InputGroup>
+            <UButton
+                :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                color="white"
+                variant="outline"
+                aria-label="Theme"
+                @click="isLight = !isLight"
+            />
+          </InputGroup>
+
+        </div>
+        <div v-else-if="item.label === 'Projekte'">
+          <UDivider
+            label="Phasenvorlagen"
+          />
+        </div>
+        <div v-else-if="item.label === 'Dokumente'">
+          <UDivider
+              label="Tags"
+              class="mb-3"
+          />
+          <InputGroup>
+            <UBadge
+                v-for="tag in dataStore.ownTenant.tags.documents"
+            >
+              {{tag}}
+            </UBadge>
+          </InputGroup>
+
+
+          {{dataStore.ownTenant.tags}}
+        </div>
+      </UCard>
+
+    </template>
+  </UTabs>
+</template>
+
+<style scoped>
+
+</style>