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

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

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

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

@@ -3,16 +3,14 @@ import { useSidebar } from '#imports'
 
 const { isOpen, toggle } = useSidebar('nc-right-sidebar')
 
-const onClick = (_event: Event) => {
-  // event.stopPropagation()
-  // alert('onClick toggle button')
+const onClick = () => {
   toggle(!isOpen.value)
 }
 </script>
 
 <template>
   <div :class="{ 'nc-active-btn': isOpen }">
-    FOO<a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
+    <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" />
 
@@ -20,6 +18,6 @@ const onClick = (_event: Event) => {
 
         {{ $t('objects.views') }}
       </div>
-    </a-button>BAR
+    </a-button>
   </div>
 </template>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
-import { useGlobal } from '../../composables/useGlobal'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -20,7 +19,6 @@ import {
   useMetas,
   useProvideKanbanViewStore,
   useProvideSmartsheetStore,
-  useSidebar,
   useUIPermission,
 } from '#imports'
 import type { TabItem } from '~/lib'
@@ -37,8 +35,6 @@ 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!])
@@ -67,42 +63,6 @@ provide(
   ReadonlyInj,
   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>