refactor(gui-v2): replace v-app with ant-layout

packages/nc-gui-v2/app.vue

@@ -14,39 +14,48 @@ const signOut = () => {
 }
 
 const toggleSidebar = useToggle($state.sidebarOpen)
+
+const sidebarOpen = computed({
+  get: () => $state.sidebarOpen.value ?? true,
+  set: (val) => toggleSidebar(val),
+})
 </script>
 
 <template>
   <a-layout>
-    <a-layout-header class="flex !bg-primary items-center text-white">
+    <a-layout-header class="flex !bg-primary items-center text-white !px-4">
-      <div class="flex items-center flex-1">
+      <MaterialSymbolsMenu
+        v-if="$state.signedIn.value"
+        class="text-xl cursor-pointer"
+        @click="toggleSidebar(!$state.sidebarOpen.value)"
+      />
+
+      <div class="flex-1" />
+
+      <div class="ml-4 flex items-center flex-1">
         <div class="flex items-center gap-2">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl" @click="navigateTo('/')">NocoDB</span>
         </div>
 
         <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
-        <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
+          <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
-          {{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
+            {{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
-        </span>
+          </span>
 
 
-        todo: replace shortkey?
+          todo: replace shortkey?
-        <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
+          <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
-         -->
+           -->
       </div>
 
+      <div class="flex-1" />
+
       <div class="flex justify-end gap-4">
         <general-color-mode-switcher v-model="$state.darkMode.value" />
 
         <general-language class="mr-3" />
 
-        <MaterialSymbolsMenu
-          v-if="$state.signedIn.value"
-          class="block text-xl cursor-pointer xl:(hidden)"
-          @click="toggleSidebar"
-        />
-
         <template v-if="$state.signedIn.value">
           <a-dropdown :trigger="['click']">
             <MdiDotsVertical class="md:text-xl cursor-pointer" @click.prevent />
@@ -62,7 +71,7 @@ const toggleSidebar = useToggle($state.sidebarOpen)
 
                 <a-menu-divider class="!m-0" />
 
-                <a-menu-item class="!rounded" key="1">
+                <a-menu-item key="1" class="!rounded">
                   <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
                     <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
                     <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
@@ -75,6 +84,20 @@ const toggleSidebar = useToggle($state.sidebarOpen)
       </div>
     </a-layout-header>
 
-    <NuxtPage />
+    <a-layout>
+      <a-layout-sider
+        v-model:collapsed="sidebarOpen"
+        width="300"
+        breakpoint="md"
+        collapsed-width="0"
+        class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
+        :trigger="null"
+        collapsible
+      >
+        <div id="sidebar" class="w-full h-full" />
+      </a-layout-sider>
+
+      <NuxtPage />
+    </a-layout>
   </a-layout>
 </template>

packages/nc-gui-v2/components.d.ts

@@ -11,9 +11,11 @@ declare module '@vue/runtime-core' {
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

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

@@ -19,9 +19,9 @@ export default {
 
 <template>
   <a-layout-content>
-    <slot name="sidebar">
+    <teleport v-if="$slots.sidebar" to="#sidebar">
-      <div id="sidebar" />
+      <slot name="sidebar" />
-    </slot>
+    </teleport>
 
     <slot />
   </a-layout-content>

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

@@ -40,64 +40,59 @@ const activePage = $ref(navDrawerOptions[0].title)
 <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">
-            <v-menu class="select-none">
+            <template #activator="{ props }">
-              <template #activator="{ props }">
+              <div
-                <div
+                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"
-                  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="props.onClick"
-                  @click="props.onClick"
-                >
-                  <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
-                  {{ $t('title.newProj') }}
-                </div>
-              </template>
-
-              <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>
-
-          <div class="advance-menu flex-1">
-            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'secondary' : 'primary'">
-              <!-- todo: v-list-item-group doesn't seem to work with vuetify 3 yet ... -->
-              <v-list-item
-                v-for="item in navDrawerOptions"
-                :key="item.title"
-                class="flex items-center gap-4 !rounded-r-lg"
-                :value="item.title"
               >
-                <component :is="item.icon" />
+                <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
+                {{ $t('title.newProj') }}
+              </div>
+            </template>
 
-                <span class="font-semibold">
+            <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-                  {{ item.title }}
+              <div
-                </span>
+                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-              </v-list-item>
+                @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>
-          </div>
+          </v-menu>
+        </div>
 
-          <v-divider />
+        <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-social />
+              <span class="font-semibold">
+                {{ option.title }}
+              </span>
+            </div>
+          </a-menu-item>
+        </a-menu>
 
-          <general-sponsors :nav="true" />
+        <general-social />
-        </div>
+
-      </v-navigation-drawer>
+        <general-sponsors :nav="true" />
+      </div>
     </template>
 
     <v-container class="flex-1 mb-12">