mobile optimisations - work on merging right and left sidebar (WIP)

packages/nc-gui/components/smartsheet/sidebar/mobile.vue

@@ -139,7 +139,7 @@ function onOpenModal({
 
 <template>
   <div>
-    FOO MOBILE
+    MOBILE
     <a-layout-sider
       ref="sidebar"
       :collapsed="sidebarCollapsed"

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -49,6 +49,8 @@ const reloadViewMetaEventHook = createEventHook<void | boolean>()
 
 const openNewRecordFormHook = createEventHook<void>()
 
+const mainArea = ref<HTMLDivElement>()
+
 useProvideKanbanViewStore(meta, activeView)
 
 // todo: move to store
@@ -65,12 +67,32 @@ provide(
   ReadonlyInj,
   computed(() => !isUIAllowed('xcDatatableEditable')),
 )
+
+const { isOpen: isMobileRightSidebarOpen, toggle: toggleMobileRightSidebar } = useSidebar('nc-right-sidebar', { isOpen: true })
+
+// const { isOpen, toggle } = useSidebar('nc-right-sidebar')
+
+const hideSidebarOnClickOrTouchIfMobileMode = (_event: Event) => {
+  if (isMobileMode.value && isMobileRightSidebarOpen.value) {
+    toggleMobileRightSidebar(false)
+  }
+}
+
+onMounted(() => {
+  // if (isMobileMode.value) toggle(true)
+  mainArea.value?.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+})
+
+watch(meta, () => {
+  toggleMobileRightSidebar(true)
+})
+
 </script>
 
 <template>
   <div class="nc-container flex h-full">
-    <SmartsheetSidebarMobile v-if="meta && isMobileMode" class="nc-left-sidebar-mobile" />
-    <div class="flex flex-col h-full flex-1 min-w-0">
+    <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" />
+    <div class="flex flex-col h-full flex-1 min-w-0" ref="mainArea">
       <LazySmartsheetToolbar />
 
       <Transition name="layout" mode="out-in">

packages/nc-gui/lib/enums.ts

@@ -87,6 +87,10 @@ export enum SmartsheetStoreEvents {
   FIELD_ADD = 'field-add',
 }
 
+export enum GlobalEvents {
+  CLICKED_TABLE_LINK_IN_MOBILE_MODE = 'clicked-table-link-in-mobile-mode',
+}
+
 export enum DataSourcesSubTab {
   New = 'New',
   Metadata = 'Metadata',

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

@@ -32,25 +32,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => {
 
   if (isMobileMode.value && isOpen.value) {
-    // && !event.target?.matches('.show-sidebar-button')
-    // alert('now we will close the sidebar')
     toggle(false)
   }
-  // if (!event.target.matches('.show-sidebar-button')) {
-  //   this.sidebarVisible = false
-  // }
-
-  // console.log('event.target', event.target)
-  // console.log('toggleSideBarButton.value', toggleSideBarButton.value)
-  // console.log('inside of hideSidebarOnClickOrTouchIfMobileMode')
-  // console.log('isOpen.value', isOpen.value)
-  // console.log('event.target !== toggleSideBarButton.value', event.target !== toggleSideBarButton.value)
-  // console.log('------------')
-  // debugger
-  // if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) {
-  // if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) {
-  //   toggle(false)
-  // }
 }
 
 onMounted(() => {

packages/nc-gui/plugins/globalEventBus.ts

@@ -0,0 +1,7 @@
+import type { GlobalEvents } from '#imports';
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const eventBus = useEventBus<GlobalEvents>(Symbol('GlobalEventBus'))
+  nuxtApp.provide('globalEventBus', eventBus)
+})