refactor: move project pages

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/pages/nc/[projectId].vue

@@ -1,37 +1,35 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { watch } from "vue";
-import useProject from '~/composables/useProject'
+import useProject from "~/composables/useProject";
-import useTabs from '~/composables/useTabs'
+import useTabs from "~/composables/useTabs";
 
-const route = useRoute()
+const route = useRoute();
-const { loadProject, loadTables } = useProject()
+const { loadProject, loadTables } = useProject();
-const { clearTabs } = useTabs()
+const { clearTabs } = useTabs();
 
 onMounted(async () => {
-  await loadProject(route.params.projectId as string)
+  await loadProject(route.params.projectId as string);
-  await loadTables()
+  await loadTables();
-})
+});
 
 watch(
   () => route.params.projectId,
   async (newVal, oldVal) => {
     if (newVal !== oldVal) {
-      clearTabs()
+      clearTabs();
       if (newVal) {
-        await loadProject(newVal as string)
+        await loadProject(newVal as string);
-        await loadTables()
+        await loadTables();
       }
     }
-  },
+  }
-)
+);
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer permanent>
+      <DashboardTreeView />
-        <DashboardTreeView />
-      </v-navigation-drawer>
     </template>
 
     <v-container fluid>

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

@@ -65,60 +65,59 @@ const visible = ref(true)
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer v-model="$state.sidebarOpen.value" :border="0">
+      <div class="flex flex-col h-full">
-        <div class="flex flex-col h-full">
+        <div class="flex p-4">
-          <div class="flex p-4">
+          <v-menu class="select-none">
-            <a-dropdown class="select-none" trigger="click">
+            <template #activator="{ props }">
-              <a
+              <div
-                class="ant-dropdown-link bg-white mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold hover:(!bg-gray-100)"
+                class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
-                @click.prevent
+                @click="props.onClick"
               >
-                <MdiPlus class="text-primary text-2xl" />
+                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
                 {{ $t('title.newProj') }}
-              </a>
+              </div>
-              <template #overlay>
+            </template>
-                <div class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-                  <div
-                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                    @click="navigateTo('/projects/create')"
-                  >
-                    <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                    <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-                  </div>
-                  <div
-                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                    @click="navigateTo('/projects/create-external')"
-                  >
-                    <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                    <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-                  </div>
-                </div>
-              </template>
-            </a-dropdown>
-          </div>
-
-          <div class="advance-menu flex-1">
-            <div :color="$state.darkMode.value ? 'default' : 'primary'">
-              <a-menu class="flex flex-col gap-1" mode="inline" :open-keys="[activePage]">
-                <a-menu-item v-for="item in navDrawerOptions" :key="item.title" class="flex items-center gap-4 !rounded-r-lg">
-                  <template #icon>
-                    <component :is="item.icon" />
-                  </template>
-                  <span class="font-semibold">
-                    {{ item.title }}
-                  </span>
-                </a-menu-item>
-              </a-menu>
-            </div>
-          </div>
 
-          <v-divider />
+            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+              <div
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                @click="navigateTo('/create')"
+              >
+                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+              </div>
+              <div
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                @click="navigateTo('/create-external')"
+              >
+                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+              </div>
+            </v-list>
+          </v-menu>
+        </div>
 
-          <general-social />
+        <a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+          <a-menu-item
+            v-for="(option, index) in navDrawerOptions"
+            :key="index"
+            class="f!rounded-r-lg"
+            @click="activePage = option.title"
+          >
+            <div class="flex items-center gap-4">
+              <component :is="option.icon" />
 
-          <general-sponsors :nav="true" />
+              <span class="font-semibold">
-        </div>
+                {{ option.title }}
-      </v-navigation-drawer>
+              </span>
+            </div>
+          </a-menu-item>
+        </a-menu>
+
+        <general-social />
+
+        <general-sponsors :nav="true" />
+      </div>
     </template>
 
     <v-container class="flex-1 mb-12">

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

@@ -22,10 +22,9 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div class="mx-8">
+  <div class="mx-auto max-w-[700px]">
     <div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
       <div>{{ $t('general.title') }}</div>
-      <div>Status</div>
       <div>Updated At</div>
       <div></div>
     </div>
@@ -38,7 +37,6 @@ const openProject = async (project: ProjectType) => {
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
-        <div>{{ project.status }}</div>
         <div>{{ project.updated_at }}</div>
         <div>
           <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />