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

packages/nc-gui-v2/app.vue

@@ -14,12 +14,25 @@ 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">
-      <div class="flex items-center flex-1">
+    <a-layout-header class="flex !bg-primary items-center text-white !px-4">
+      <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>
@@ -36,17 +49,13 @@ const toggleSidebar = useToggle($state.sidebarOpen)
            -->
       </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>
 
+    <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">
-      <div id="sidebar" />
-    </slot>
+    <teleport v-if="$slots.sidebar" to="#sidebar">
+      <slot name="sidebar" />
+    </teleport>
 
     <slot />
   </a-layout-content>

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

@@ -40,7 +40,6 @@ 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 p-4">
           <v-menu class="select-none">
@@ -73,31 +72,27 @@ const activePage = $ref(navDrawerOptions[0].title)
           </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"
+        <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"
           >
-                <component :is="item.icon" />
+            <div class="flex items-center gap-4">
+              <component :is="option.icon" />
 
               <span class="font-semibold">
-                  {{ item.title }}
+                {{ option.title }}
               </span>
-              </v-list-item>
-            </v-list>
             </div>
-
-          <v-divider />
+          </a-menu-item>
+        </a-menu>
 
         <general-social />
 
         <general-sponsors :nav="true" />
       </div>
-      </v-navigation-drawer>
     </template>
 
     <v-container class="flex-1 mb-12">