feat(gui-v2): add database to sidebar icons

packages/nc-gui-v2/app.vue

@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
-import { computed, provideSidebar, ref, useBreakpoints, useGlobal, useProject, useRouter } from '#imports'
+import { computed, provideSidebar, ref, useBreakpoints, useGlobal, useRoute, useRouter } from '#imports'
-
 /** get current breakpoints (for enabling sidebar) */
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { signOut, signedIn, isLoading, user } = $(useGlobal())
 
-const { project } = useProject()
+const { isOpen } = provideSidebar({ isOpen: (signedIn && breakpoints.greater('md').value) || true })
-
-const { isOpen } = provideSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
 
 const router = useRouter()
 
+const route = useRoute()
+
+console.log(route.name)
+
 const sidebar = ref<HTMLDivElement>()
 
 const email = computed(() => user?.email ?? '---')
@@ -63,12 +64,19 @@ const logout = () => {
         </template>
       </a-dropdown>
 
-      <div id="sidebar" ref="sidebar" class="w-full p-2" />
+      <div id="sidebar" ref="sidebar" class="text-white flex flex-col items-center w-full">
+        <div
+          :class="[route.name.includes('nc-projectId') ? 'bg-pink-500' : '']"
+          class="flex w-full justify-center items-center h-12 group p-2"
+        >
+          <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
+        </div>
+      </div>
     </a-layout-sider>
 
     <a-layout class="!flex-col">
       <a-layout-header class="flex !bg-primary items-center text-white px-1">
-        <div v-if="project" class="w-[250px] text-xl px-4">{{ project.title }}</div>
+        <div id="header-start" class="w-[250px] px-4" />
 
         <div class="hidden flex justify-center">
           <div v-show="isLoading" class="flex items-center gap-2 ml-3">

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

@@ -80,7 +80,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     theme="light"
   >
     <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 absolute top-9 left-[-1rem] shadow bg-gray-100 rounded-full"
     >
       <MaterialSymbolsChevronRightRounded
         v-if="sidebarOpen"

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

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import { useProject, useRoute, useSidebar, useTabs, useToggle } from '#imports'
+import { provideSidebar, useProject, useRoute, useSidebar, useTabs } from '#imports'
 import { TabType } from '~/composables'
 import MaterialSymbolsChevronRightRounded from '~icons/material-symbols/chevron-right-rounded'
 import MaterialSymbolsChevronLeftRounded from '~icons/material-symbols/chevron-left-rounded'
 
 const route = useRoute()
 
-const { loadProject, loadTables } = useProject(route.params.projectId as string)
+const { project, loadProject, loadTables } = useProject(route.params.projectId as string)
 
 const { addTab, clearTabs } = useTabs()
 
-useSidebar({ hasSidebar: true, isOpen: true })
+// set old sidebar state
+useSidebar({ isOpen: true })
 
-const [isOpen, toggle] = useToggle(true)
+// create a new sidebar state
+const { isOpen, toggle } = provideSidebar({ isOpen: true })
 
 clearTabs()
 if (!route.params.type) {
@@ -36,7 +38,7 @@ await loadTables()
       theme="light"
     >
       <div
-        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-9 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 right-[-0.75rem] shadow bg-gray-100 rounded-full"
       >
         <MaterialSymbolsChevronLeftRounded
           v-if="isOpen"
@@ -53,6 +55,11 @@ await loadTables()
       <DashboardTreeView />
     </a-layout-sider>
 
+    <teleport to="#header-start">
+      <a-dropdown> </a-dropdown>
+      <div v-if="project" class="text-xl">{{ project.title }}</div>
+    </teleport>
+
     <NuxtPage />
   </NuxtLayout>
 </template>

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

@@ -36,7 +36,7 @@ function openQuickImportDialog(type: string) {
 <template>
   <div class="nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
-      <div>
+      <div class="px-1">
         <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />