From 57fcbc718c52102d7bf1ef4029b6cf7027c3af15 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 26 Oct 2023 17:05:39 +0000
Subject: [PATCH] fix: Made the whole create view btn clickable

---
 .../dashboard/TreeView/CreateViewBtn.vue      | 31 ++++++++++++++++++-
 .../dashboard/TreeView/ViewsList.vue          |  7 +++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index df777a869e..34cb4118d5 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -2,8 +2,15 @@
 import type { ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 
+const props = defineProps<{
+  // Prop used to align the dropdown to the left in sidebar
+  alignLeftLevel: number | undefined
+}>()
+
 const { $e } = useNuxtApp()
 
+const alignLeftLevel = toRef(props, 'alignLeftLevel')
+
 const { refreshCommandPalette } = useCommandPalette()
 const viewsStore = useViewsStore()
 const { loadViews, navigateToView } = viewsStore
@@ -16,6 +23,14 @@ const toBeCreateType = ref<ViewTypes>()
 
 const isOpen = ref(false)
 
+const overlayClassName = computed(() => {
+  if (alignLeftLevel.value === 1) return 'nc-view-create-dropdown nc-view-create-dropdown-left-1'
+
+  if (alignLeftLevel.value === 2) return 'nc-view-create-dropdown nc-view-create-dropdown-left-2'
+
+  return 'nc-view-create-dropdown'
+})
+
 async function onOpenModal({
   title = '',
   type,
@@ -84,7 +99,7 @@ async function onOpenModal({
 </script>
 
 <template>
-  <NcDropdown v-model:visible="isOpen" destroy-popup-on-hide @click.stop="isOpen = true">
+  <NcDropdown v-model:visible="isOpen" destroy-popup-on-hide :overlay-class-name="overlayClassName" @click.stop="isOpen = true">
     <slot />
     <template #overlay>
       <NcMenu class="max-w-48">
@@ -151,3 +166,17 @@ async function onOpenModal({
   @apply text-brand-400;
 }
 </style>
+
+<style lang="scss">
+.nc-view-create-dropdown {
+  @apply !max-w-46 !min-w-46;
+}
+
+.nc-view-create-dropdown-left-1 {
+  @apply !left-18;
+}
+
+.nc-view-create-dropdown-left-2 {
+  @apply !left-23.5;
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index f972225c50..d0c0ea4326 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -387,13 +387,14 @@ function onOpenModal({
     <DashboardTreeViewCreateViewBtn
       v-if="isUIAllowed('viewCreateOrEdit')"
       :class="{
-        '!ml-18 !xs:(ml-19.75)': isDefaultSource,
-        '!ml-23.5 !xs:(ml-27)': !isDefaultSource,
+        '!pl-18 !xs:(pl-19.75)': isDefaultSource,
+        '!pl-23.5 !xs:(pl-27)': !isDefaultSource,
       }"
+      :align-left-level="isDefaultSource ? 1 : 2"
     >
       <div
         role="button"
-        class="flex flex-row items-center cursor-pointer rounded-md max-w-40"
+        class="flex flex-row items-center cursor-pointer rounded-md w-full"
         :class="{
           'text-brand-500 hover:text-brand-600': activeTableId === table.id,
           'text-gray-500 hover:text-brand-500': activeTableId !== table.id,