init

src/layouts/DefaultLayout.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { authClient } from '@/lib/auth-client.ts'
+import { computed, ref } from 'vue'
+import { useTheme } from 'vuetify'
+import ProjectMenu from '@/components/ProjectMenu.vue'
+
+const router = useRouter()
+const session = authClient.useSession()
+const theme = useTheme()
+
+const title = 'APP'
+const version = '0.0.1'
+
+const isAuth = computed(() => !!session.value.data)
+
+const menu = ref([
+  {
+    title: 'Home',
+    value: 1,
+    props: { prependIcon: 'mdi-home', to: '/', requiresAuth: false },
+  },
+  {
+    title: 'issues',
+    value: 2,
+    props: { prependIcon: 'mdi-list-status', to: '/issues', requiresAuth: true },
+  },
+  {
+    title: 'summary',
+    value: 3,
+    props: { prependIcon: 'mdi-view-dashboard', to: '/summary', requiresAuth: true },
+  },
+  {
+    title: 'games',
+    value: 4,
+    props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
+  },
+])
+
+function goToSignIn() {
+  router.push({ path: '/sign-in' })
+}
+
+function goToSignUp() {
+  router.push({ path: '/sign-up' })
+}
+
+function goToProfile() {
+  router.push({ path: '/profile' })
+}
+
+async function goToSignOut() {
+  await authClient.signOut({
+    fetchOptions: {
+      onSuccess: () => {
+        router.push('/sign-in')
+      },
+    },
+  })
+}
+
+function toggleTheme(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  theme.setTransitionOrigin(target)
+  theme.toggle()
+}
+
+const goToSettings = () => {
+  router.push({ name: 'settings' })
+}
+</script>
+
+<template>
+  <v-layout>
+    <v-app-bar density="compact" elevation="0" border>
+      <template v-slot:prepend>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-app-bar-nav-icon variant="text" v-bind="props" />
+          </template>
+
+          <v-list class="mt-1" width="200" density="compact">
+            <template v-for="item in menu" :key="item.value">
+              <v-list-item v-if="!item.props.requiresAuth || isAuth === item.props.requiresAuth" :to="item.props.to">
+                <v-list-item-title class="d-flex align-center ga-4">
+                  <v-icon :icon="item.props.prependIcon" />
+                  <div>{{ item.title }}</div>
+                </v-list-item-title>
+              </v-list-item>
+            </template>
+          </v-list>
+        </v-menu>
+      </template>
+
+      <v-app-bar-title>
+        <div class="d-flex ga-2 align-center">
+          <router-link class="text-decoration-none text-link font-weight-bold" to="/">
+            {{ title }}
+          </router-link>
+          <span>v{{ version }}</span>
+        </div>
+      </v-app-bar-title>
+
+      <div class="d-flex ga-4 align-center" v-if="session.data">
+        <project-menu />
+        <div class="mr-2">
+          Hello,
+          <router-link class="text-decoration-none text-link text-capitalize" to="/profile">
+            {{ session?.data.user.name }}
+          </router-link>
+        </div>
+      </div>
+      <v-btn v-if="!session.data" @click="goToSignIn">Sign In</v-btn>
+      <v-btn v-if="!session.data" @click="goToSignUp">Sign Up</v-btn>
+
+      <v-divider class="mx-1" vertical />
+      <v-btn icon="mdi-brightness-6" @click="toggleTheme" />
+      <v-divider class="mx-1" vertical />
+
+      <v-menu v-if="session.data">
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props">
+            <v-icon icon="mdi-account" />
+          </v-btn>
+        </template>
+        <v-list class="mt-1" width="200">
+          <v-list-item @click="goToProfile">
+            <v-icon icon="mdi-account" />
+            Profile
+          </v-list-item>
+          <v-list-item @click="goToSettings">
+            <v-icon icon="mdi-cog" />
+            settings
+          </v-list-item>
+          <v-list-item @click="goToSignOut">
+            <v-icon icon="mdi-logout" />
+            Sign Out
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
+    <v-main>
+      <v-container :fluid="false">
+        <slot></slot>
+      </v-container>
+    </v-main>
+  </v-layout>
+</template>
+
+<style scoped lang="scss"></style>