feat(gui-v2): add general layout that extends default

packages/nc-gui-v2/app.vue

@@ -1,5 +1,3 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <NuxtPage />
 </template>

packages/nc-gui-v2/layouts/default.vue

@@ -1,13 +1,15 @@
 <script>
 export default {
-  name: 'Default',
+  name: 'General',
 }
 </script>
 
 <template>
   <v-layout>
-    <v-app-bar color="" />
-    <v-navigation-drawer :permanent="true" />
+    <slot name="header">
+      <v-app-bar color="" />
+    </slot>
+    <slot name="sidebar" />
     <v-main>
       <slot />
     </v-main>

packages/nc-gui-v2/layouts/general.vue

@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'General',
+}
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <slot name="sidebar" />
+  </NuxtLayout>
+</template>

packages/nc-gui-v2/pages/projects/index.vue

@@ -1,52 +1,39 @@
 <script setup lang="ts">
-import { useRouter } from '#app'
+import { navigateTo } from '#app'
 
 const { $api } = useNuxtApp()
-const { user } = useUser()
 
-const router = useRouter()
-
-const projects = ref()
-
-const loadProjects = async () => {
-  const projectsResponse = await $api.project.list({}, {
-    headers: {
-      'xc-auth': user.token,
-    },
-  })
-  projects.value = projectsResponse.list
-}
-
-const navigateToDashboard = async (project) => {
-  await router.push(`/dashboard/${project.id}`)
-}
-
-onMounted(async () => {
-  await loadProjects()
-})
+const response = await $api.project.list({})
+const projects = ref(response.list)
 </script>
 
 <template>
-  <v-container>
-    <div class="pa-2 d-flex mb-10">
-      <v-spacer />
-      <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="router.push('/projects/create')">
-        Create Project
-      </v-btn>
-      <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="router.push('/projects/create')">
-        Create External Project
-      </v-btn>
-    </div>
-    <v-row>
-      <v-col v-for="project of projects" :key="project.id" cols="4">
-        <v-card @click="navigateToDashboard(project)">
-          <v-card-title>
-            <div class="text-center">
-              <h3>{{ project.title }}</h3>
-            </div>
-          </v-card-title>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+  <NuxtLayout>
+    <template #sidebar>
+      <v-navigation-drawer :permanent="true" />
+    </template>
+
+    <v-container>
+      <div class="pa-2 d-flex mb-10">
+        <v-spacer />
+        <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
+          {{ $t('activity.createProject') }}
+        </v-btn>
+        <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateTo('/projects/create')">
+          {{ $t('activity.createProjectExtended.extDB') }}
+        </v-btn>
+      </div>
+      <v-row>
+        <v-col v-for="project of projects" :key="project.id" cols="4">
+          <v-card @click="navigateTo(`/dashboard/${project.id}`)">
+            <v-card-title>
+              <div class="text-center">
+                <h3>{{ project.title }}</h3>
+              </div>
+            </v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </NuxtLayout>
 </template>