From a173d0a52403ebeb84110c6d7553f9244c3b2581 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 Aug 2022 18:23:51 +0200
Subject: [PATCH] chore(gui-v2): add dropdown icon

---
 packages/nc-gui-v2/app.vue                     | 15 ++++++++++-----
 .../nc-gui-v2/pages/nc/[projectId]/index.vue   | 18 ++++++++++++++----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index e0a5ad30c8..62e385ad38 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -2,6 +2,7 @@
 import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
 import { computed, provideSidebar, ref, useBreakpoints, useGlobal, useRoute, useRouter } from '#imports'
+
 /** get current breakpoints (for enabling sidebar) */
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -31,13 +32,13 @@ const logout = () => {
       :collapsed="!isOpen"
       width="50"
       collapsed-width="0"
-      class="!bg-primary h-full"
+      class="!bg-primary h-full shadow-lg"
       :trigger="null"
       collapsible
       theme="light"
     >
       <a-dropdown :trigger="['click']">
-        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 border-b-1 border-r-1">
           <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
         </div>
 
@@ -71,12 +72,16 @@ const logout = () => {
         >
           <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>
+
+        <div class="flex w-full justify-center items-center h-12 group p-2">
+          <MdiLightningBoltOutline class="cursor-not-allowed text-2xl text-gray-400" />
+        </div>
       </div>
     </a-layout-sider>
 
     <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white px-1">
-        <div id="header-start" class="w-[250px] px-4" />
+      <a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
+        <div id="header-start" class="w-[250px] flex items-center px-4 h-full" />
 
         <div class="hidden flex justify-center">
           <div v-show="isLoading" class="flex items-center gap-2 ml-3">
@@ -86,7 +91,7 @@ const logout = () => {
         </div>
 
         <div class="flex-1 text-white">
-          <div class="flex items-center w-1/2 mx-auto gap-4">
+          <div class="flex items-center px-4 gap-4">
             <a-tooltip placement="bottom">
               <template #title> Go back </template>
 
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index a8405cef13..9d6889cfea 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -3,6 +3,7 @@ import { provideSidebar, useProject, useRoute, useSidebar, useTabs } from '#impo
 import { TabType } from '~/composables'
 import MaterialSymbolsChevronRightRounded from '~icons/material-symbols/chevron-right-rounded'
 import MaterialSymbolsChevronLeftRounded from '~icons/material-symbols/chevron-left-rounded'
+import MdiChevronDown from '~icons/mdi/chevron-down'
 
 const route = useRoute()
 
@@ -32,7 +33,7 @@ await loadTables()
       :collapsed="!isOpen"
       width="250"
       collapsed-width="0"
-      class="relative shadow h-full"
+      class="relative shadow h-full !bg-gray-100/50"
       :trigger="null"
       collapsible
       theme="light"
@@ -55,9 +56,18 @@ 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 v-if="project" to="#header-start">
+      <a-dropdown :trigger="['click']">
+        <div class="group cursor-pointer w-full flex justify-between items-center">
+          <div class="text-xl">{{ project.title }}</div>
+
+          <MdiChevronDown class="group-hover:text-pink-500 text-2xl" />
+        </div>
+
+        <template #overlay>
+          <div>Foo</div>
+        </template>
+      </a-dropdown>
     </teleport>
 
     <NuxtPage />