chore(gui-v2): update nc index page

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

@@ -38,132 +38,132 @@ await loadTables()
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <a-layout-sider
-      :collapsed="!isOpen"
-      width="250"
-      collapsed-width="0"
-      class="relative shadow-md h-full"
-      :trigger="null"
-      collapsible
-      theme="light"
-    >
-      <a-tooltip placement="right">
-        <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-9 shadow bg-gray-100 rounded-full"
-        >
-          <MaterialSymbolsChevronLeftRounded
-            v-if="isOpen"
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-            @click="toggle(false)"
-          />
-
-          <MaterialSymbolsChevronRightRounded
-            v-else
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-            @click="toggle(true)"
-          />
-        </div>
-      </a-tooltip>
-      <DashboardTreeView />
-    </a-layout-sider>
-
-    <teleport v-if="project" to="#header-start">
-      <a-dropdown :trigger="['click']">
-        <div class="group cursor-pointer w-full flex gap-4 items-center">
-          <div class="text-xl truncate">{{ project.title }}</div>
-
-          <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
-        </div>
-
-        <template #overlay>
-          <a-menu class="ml-2 !p-0 min-w-32 leading-8 !rounded">
-            <a-menu-item-group title="Project Settings">
-              <a-menu-item key="copy">
-                <div class="nc-project-menu-item group">
-                  <MdiContentCopy class="group-hover:text-pink-500" />
-                  Copy Project Info
-                </div>
-              </a-menu-item>
-
-              <a-menu-item key="api">
-                <a
-                  v-if="isUIAllowed('apiDocs')"
-                  v-t="['e:api-docs']"
-                  :href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`"
-                  target="_blank"
-                  class="nc-project-menu-item group"
-                >
-                  <MdiApi class="group-hover:text-pink-500" />
-                  Swagger: Rest APIs
-                </a>
-              </a-menu-item>
-
-              <a-menu-item key="teamAndAuth">
-                <div
-                  v-if="isUIAllowed('settings')"
-                  v-t="['c:navdraw:project-settings']"
-                  class="nc-project-menu-item group"
-                  @click="toggleDialog(true, 'teamAndAuth')"
-                >
-                  <MdiAccountGroup class="group-hover:text-pink-500" />
-                  Team & Auth
-                </div>
-              </a-menu-item>
-
-              <a-menu-item key="appStore">
-                <div
-                  v-if="isUIAllowed('settings')"
-                  v-t="['c:navdraw:project-settings']"
-                  class="nc-project-menu-item group"
-                  @click="toggleDialog(true, 'appStore')"
-                >
-                  <MdiStore class="group-hover:text-pink-500" />
-                  App Store
-                </div>
-              </a-menu-item>
-
-              <a-menu-item key="metaData">
-                <div
-                  v-if="isUIAllowed('settings')"
-                  v-t="['c:navdraw:project-settings']"
-                  class="nc-project-menu-item group"
-                  @click="toggleDialog(true, 'metaData')"
-                >
-                  <MdiTableBorder class="group-hover:text-pink-500" />
-                  Project Metadata
-                </div>
-              </a-menu-item>
-
-              <a-menu-item key="audit">
-                <div
-                  v-if="isUIAllowed('settings')"
-                  v-t="['c:navdraw:project-settings']"
-                  class="nc-project-menu-item group"
-                  @click="toggleDialog(true, 'audit')"
-                >
-                  <MdiNotebookCheckOutline class="group-hover:text-pink-500" />
-                  Audit
-                </div>
-              </a-menu-item>
-
-              <a-sub-menu key="preview-as">
-                <template #title>
+    <template #sidebar>
+      <a-layout-sider
+        :collapsed="!isOpen"
+        width="250"
+        collapsed-width="0"
+        class="relative shadow-md h-full"
+        :trigger="null"
+        collapsible
+        theme="light"
+      >
+        <a-dropdown :trigger="['click']">
+          <div class="group cursor-pointer w-full flex gap-4 items-center">
+            <div class="text-xl truncate">{{ project.title }}</div>
+
+            <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
+          </div>
+
+          <template #overlay>
+            <a-menu class="ml-2 !p-0 min-w-32 leading-8 !rounded">
+              <a-menu-item-group title="Project Settings">
+                <a-menu-item key="copy">
                   <div class="nc-project-menu-item group">
                     <MdiContentCopy class="group-hover:text-pink-500" />
-                    Preview Project As
+                    Copy Project Info
                   </div>
-                </template>
-
-                <a-menu-item> Foo </a-menu-item>
-              </a-sub-menu>
-            </a-menu-item-group>
-          </a-menu>
-        </template>
-      </a-dropdown>
-    </teleport>
+                </a-menu-item>
+
+                <a-menu-item key="api">
+                  <a
+                    v-if="isUIAllowed('apiDocs')"
+                    v-t="['e:api-docs']"
+                    :href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`"
+                    target="_blank"
+                    class="nc-project-menu-item group"
+                  >
+                    <MdiApi class="group-hover:text-pink-500" />
+                    Swagger: Rest APIs
+                  </a>
+                </a-menu-item>
+
+                <a-menu-item key="teamAndAuth">
+                  <div
+                    v-if="isUIAllowed('settings')"
+                    v-t="['c:navdraw:project-settings']"
+                    class="nc-project-menu-item group"
+                    @click="toggleDialog(true, 'teamAndAuth')"
+                  >
+                    <MdiAccountGroup class="group-hover:text-pink-500" />
+                    Team & Auth
+                  </div>
+                </a-menu-item>
+
+                <a-menu-item key="appStore">
+                  <div
+                    v-if="isUIAllowed('settings')"
+                    v-t="['c:navdraw:project-settings']"
+                    class="nc-project-menu-item group"
+                    @click="toggleDialog(true, 'appStore')"
+                  >
+                    <MdiStore class="group-hover:text-pink-500" />
+                    App Store
+                  </div>
+                </a-menu-item>
+
+                <a-menu-item key="metaData">
+                  <div
+                    v-if="isUIAllowed('settings')"
+                    v-t="['c:navdraw:project-settings']"
+                    class="nc-project-menu-item group"
+                    @click="toggleDialog(true, 'metaData')"
+                  >
+                    <MdiTableBorder class="group-hover:text-pink-500" />
+                    Project Metadata
+                  </div>
+                </a-menu-item>
+
+                <a-menu-item key="audit">
+                  <div
+                    v-if="isUIAllowed('settings')"
+                    v-t="['c:navdraw:project-settings']"
+                    class="nc-project-menu-item group"
+                    @click="toggleDialog(true, 'audit')"
+                  >
+                    <MdiNotebookCheckOutline class="group-hover:text-pink-500" />
+                    Audit
+                  </div>
+                </a-menu-item>
+
+                <a-sub-menu key="preview-as">
+                  <template #title>
+                    <div class="nc-project-menu-item group">
+                      <MdiContentCopy class="group-hover:text-pink-500" />
+                      Preview Project As
+                    </div>
+                  </template>
+
+                  <a-menu-item> Foo </a-menu-item>
+                </a-sub-menu>
+              </a-menu-item-group>
+            </a-menu>
+          </template>
+        </a-dropdown>
+
+        <a-tooltip placement="right">
+          <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-9 shadow bg-gray-100 rounded-full"
+          >
+            <MaterialSymbolsChevronLeftRounded
+              v-if="isOpen"
+              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+              @click="toggle(false)"
+            />
+
+            <MaterialSymbolsChevronRightRounded
+              v-else
+              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+              @click="toggle(true)"
+            />
+          </div>
+        </a-tooltip>
+        <DashboardTreeView />
+      </a-layout-sider>
+    </template>
 
     <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />