diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index e21170d18d..cc597bfb89 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -10,8 +10,6 @@ const { isLoading, isMobileMode } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
-const mainArea = ref<HTMLDivElement>()
-
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
@@ -34,10 +32,6 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
     toggle(false)
   }
 }
-
-onMounted(() => {
-  mainArea.value?.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
-})
 </script>
 
 <template>
@@ -94,7 +88,7 @@ onMounted(() => {
         <LazyGeneralFullScreen v-if="!isMobileMode" class="nc-fullscreen-icon mb-1px" />
       </div>
 
-      <div ref="mainArea" class="w-full min-h-[300px] flex-auto">
+      <div class="w-full min-h-[300px] flex-auto" @click="hideSidebarOnClickOrTouchIfMobileMode">
         <NuxtPage :page-key="`${$route.params.projectId}.${$route.name}`" />
       </div>
     </div>