From 7c8fd97d8d1ca39b39c0f2a079d63c54064b87f9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Aug 2022 18:05:47 +0200
Subject: [PATCH] feat(gui-v2): add database to sidebar icons

---
 packages/nc-gui-v2/app.vue                    | 22 +++++++++++++------
 .../components/smartsheet/sidebar/index.vue   |  2 +-
 .../nc-gui-v2/pages/nc/[projectId]/index.vue  | 17 +++++++++-----
 .../pages/nc/[projectId]/index/index.vue      |  2 +-
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 2fc8e64796..e0a5ad30c8 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/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 })
+const { isOpen } = provideSidebar({ isOpen: (signedIn && breakpoints.greater('md').value) || true })
 
 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">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 1f0e604cca..1deae391dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/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"
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index cee9171295..a8405cef13 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 474ba3aff5..7d0f058c40 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/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" />