chore(gui-v2): update layout structure

packages/nc-gui-v2/app.vue

@@ -1,7 +1,5 @@
-<script lang="ts" setup>
-//
-</script>
-
 <template>
-  <NuxtPage />
+  <NuxtLayout name="base">
+    <NuxtPage />
+  </NuxtLayout>
 </template>

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -60,7 +60,7 @@ onKeyDown('Escape', () => {
 /** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
 onMounted(() => {
   if (typeof document !== 'undefined') {
-    dropZoneRef.value = document.querySelector(`td[data-col="${column.id}"]`) as HTMLTableDataCellElement
+    dropZoneRef.value = document.querySelector(`td[data-col="${column.value.id}"]`) as HTMLTableDataCellElement
   }
 })
 </script>

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -78,7 +78,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       <template #title> Toggle sidebar </template>
 
       <div
-        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-9 left-[-1rem] shadow bg-gray-100 rounded-full"
+        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
       >
         <MaterialSymbolsChevronRightRounded
           v-if="sidebarOpen"

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

@@ -6,7 +6,7 @@ import { computed, useBreakpoints, useGlobal, useProject, useRoute } from '#impo
 /** get current breakpoints (for enabling sidebar) */
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const { signOut, isLoading, user } = useGlobal()
+const { signOut, signedIn, isLoading, user } = useGlobal()
 
 const { project } = useProject()
 
@@ -21,31 +21,62 @@ const logout = () => {
 </script>
 
 <template>
-  <a-layout>
+  <a-layout id="nc-app" has-sider>
-    <slot name="sidebar" />
+    <div id="nc-sidebar-left" />
 
     <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
-        <slot name="header-start" />
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
-
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-        <div id="header-start" class="w-[250px] flex items-center px-1 h-full" />
+        </div>
 
-        <div class="hidden flex justify-center">
+        <div class="flex justify-center">
           <div v-show="isLoading" class="flex items-center gap-2 ml-3">
             {{ $t('general.loading') }}
+
             <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
         </div>
 
         <div class="flex-1" />
 
-        <a-tooltip placement="right">
+        <a-tooltip placement="left">
           <template #title> Switch language </template>
 
           <div class="flex pr-4 items-center">
             <GeneralLanguage class="cursor-pointer text-2xl" />
           </div>
         </a-tooltip>
+
+        <template v-if="signedIn">
+          <a-dropdown :trigger="['click']">
+            <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
+
+            <template #overlay>
+              <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
+                <a-menu-item key="0" class="!rounded-t">
+                  <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+                    <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
+
+                    <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+                  </nuxt-link>
+                </a-menu-item>
+
+                <a-menu-divider class="!m-0" />
+
+                <a-menu-item key="1" class="!rounded-b">
+                  <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 group-hover:text-black nc-user-menu-signout">
+                      {{ $t('general.signOut') }}
+                    </span>
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
       </a-layout-header>
 
       <div class="w-full h-full">

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

@@ -18,13 +18,13 @@ export default {
 </script>
 
 <template>
-  <NuxtLayout name="base">
+  <div class="w-full h-full">
-    <template #sidebar>
+    <teleport v-if="$slots.sidebar" to="#nc-sidebar-left">
       <slot name="sidebar" />
-    </template>
+    </teleport>
 
     <a-layout-content>
       <slot />
     </a-layout-content>
-  </NuxtLayout>
+  </div>
 </template>

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

@@ -42,17 +42,23 @@ await loadTables()
       <a-layout-sider
         :collapsed="!isOpen"
         width="250"
-        collapsed-width="0"
+        collapsed-width="50"
-        class="relative shadow-md h-full"
+        class="relative shadow-md h-full z-1"
         :trigger="null"
         collapsible
         theme="light"
       >
         <a-dropdown :trigger="['click']">
-          <div class="group cursor-pointer w-full flex gap-4 items-center">
+          <div style="height: var(--header-height)" class="border-b-1 group cursor-pointer w-full flex gap-4 items-center px-3">
-            <div class="text-xl truncate">{{ project.title }}</div>
+            <template v-if="isOpen">
+              <div class="text-xl font-semibold truncate">{{ project.title }}</div>
 
-            <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+              <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+            </template>
+
+            <template v-else>
+              <MdiFolder class="text-pink-500 cursor-pointer transform hover:scale-105 text-2xl" />
+            </template>
           </div>
 
           <template #overlay>
@@ -78,6 +84,8 @@ await loadTables()
                   </a>
                 </a-menu-item>
 
+                <a-menu-divider />
+
                 <a-menu-item key="teamAndAuth">
                   <div
                     v-if="isUIAllowed('settings')"
@@ -126,6 +134,8 @@ await loadTables()
                   </div>
                 </a-menu-item>
 
+                <a-menu-divider />
+
                 <a-sub-menu key="preview-as">
                   <template #title>
                     <div class="nc-project-menu-item group">
@@ -145,8 +155,7 @@ await loadTables()
           <template #title> Toggle table list </template>
 
           <div
-            :class="[isOpen ? 'right-[-0.75rem]' : 'right-[-1.75rem]']"
+            class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
-            class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-9 shadow bg-gray-100 rounded-full"
           >
             <MaterialSymbolsChevronLeftRounded
               v-if="isOpen"
@@ -161,7 +170,8 @@ await loadTables()
             />
           </div>
         </a-tooltip>
-        <DashboardTreeView />
+
+        <DashboardTreeView v-show="isOpen" />
       </a-layout-sider>
     </template>
 

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

@@ -34,7 +34,7 @@ function openQuickImportDialog(type: string) {
 </script>
 
 <template>
-  <div class="nc-container pt-[9px]">
+  <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
       <div class="px-2">
         <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">

packages/nc-gui-v2/tsconfig.json

@@ -11,6 +11,7 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [
+      "@nuxt/types",
       "@intlify/vite-plugin-vue-i18n/client",
       "vue-i18n",
       "unplugin-icons/types/vue",