mobile optimisations - for now, move views sidebar again to the right - WIP

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -54,8 +54,8 @@ const { allowCSVDownload } = useSharedView()
     <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink mx-2" />
 
     <template v-if="!isOpen && !isPublic">
-      <div class="border-l-1 pl-3" :class="{ 'ml-auto': isMobileMode }">
-        <LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
+      <div class="border-l-1 pl-3 nc-views-show-sidebar-button" :class="{ 'ml-auto': isMobileMode }">
+        FOO-TOOLBAR<LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
       </div>
     </template>
   </div>

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

@@ -52,7 +52,6 @@ const sidebarCollapsed = computed(() => !isOpen.value)
 
 /** Sidebar ref */
 const sidebar: Ref<Element | null> = ref(null)
-const FOO: Ref<Element | null> = ref(null)
 
 /** Watch route param and change active view based on `viewTitle` */
 watch(
@@ -138,22 +137,9 @@ function onOpenModal({
     close(1000)
   }
 }
-
-document.addEventListener('click', (event: MouseEvent) => {
-  // sidebar.value.
-  // const sidebarFoo = document.querySelector('.nc-right-sidebar')
-  const sidebarFoo = sidebar.value
-  alert(JSON.stringify(FOO.value))
-  // alert(JSON.stringify(sidebarFoo))
-  // if (isMobileMode.value && !sidebar.value?.contains(event.target as Node)) {
-  if (isMobileMode.value && !sidebarFoo?.contains(event.target as Node)) {
-    alert('FOO')
-  }
-})
 </script>
 
 <template>
-  <div ref="FOO">
   <a-layout-sider
     ref="sidebar"
     :collapsed="sidebarCollapsed"
@@ -183,7 +169,6 @@ document.addEventListener('click', (event: MouseEvent) => {
       </template>
     </div>
   </a-layout-sider>
-  </div>
 </template>
 
 <style scoped>

packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -3,14 +3,16 @@ import { useSidebar } from '#imports'
 
 const { isOpen, toggle } = useSidebar('nc-right-sidebar')
 
-const onClick = () => {
+const onClick = (_event: Event) => {
+  // event.stopPropagation()
+  // alert('onClick toggle button')
   toggle(!isOpen.value)
 }
 </script>
 
 <template>
   <div :class="{ 'nc-active-btn': isOpen }">
-    <a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
+    FOO<a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
       <div class="flex items-center gap-1 text-[0.6rem] text-gray-500" :class="{ 'text-gray-500': !isOpen }">
         <AntDesignMenuUnfoldOutlined v-if="isOpen" />
 
@@ -18,6 +20,6 @@ const onClick = () => {
 
         {{ $t('objects.views') }}
       </div>
-    </a-button>
+    </a-button>BAR
   </div>
 </template>

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

@@ -20,6 +20,7 @@ import {
   useMetas,
   useProvideKanbanViewStore,
   useProvideSmartsheetStore,
+  useSidebar,
   useUIPermission,
 } from '#imports'
 import type { TabItem } from '~/lib'
@@ -36,6 +37,8 @@ const activeTab = toRef(props, 'activeTab')
 
 const activeView = ref()
 
+const { isMobileMode } = useGlobal()
+
 const fields = ref<ColumnType[]>([])
 
 const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
@@ -65,6 +68,41 @@ provide(
   computed(() => !isUIAllowed('xcDatatableEditable')),
 )
 
+const { isOpen: isRightSidebarOpen, toggle: toggleRightSidebar } = useSidebar('nc-right-sidebar')
+
+const rightSidebar = document.querySelector('.nc-right-sidebar')
+const rightSidebarToggleButton = document.querySelector('.nc-views-show-sidebar-button')
+
+document.addEventListener('click', (event: MouseEvent) => {
+  // debugger
+
+  console.log('++++++++')
+  console.log('event.target: ', event.target)
+  console.log('rightSidebarToggleButton: ', rightSidebarToggleButton)
+  console.log('isSameNode: ', rightSidebarToggleButton?.isSameNode(event.target as Node))
+  console.log('contains: ', rightSidebarToggleButton?.contains(event.target as Node))
+  console.log('--------')
+
+  // sidebar.value.
+  // event.stopPropagation()
+  // event.preventDefault()
+  // event.stopImmediatePropagation()
+
+  // alert(JSON.stringify(rightSidebarToggleButton?.contains(event.target as Node)))
+
+  // const sidebarFoo = sidebar.value
+  // alert(JSON.stringify(sidebarFoo))
+  // if (isMobileMode.value && !sidebar.value?.contains(event.target as Node)) {
+  if (
+    isMobileMode.value &&
+    isRightSidebarOpen.value &&
+    !rightSidebar?.contains(event.target as Node) &&
+    !rightSidebarToggleButton?.contains(event.target as Node)
+  ) {
+    // alert(JSON.stringify(rightSidebarToggleButton?.innerHTML))
+    // toggleRightSidebar()
+  }
+})
 </script>
 
 <template>