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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import {
   ActiveViewInj,
   MetaInj,
@@ -8,6 +9,7 @@ import {
   ref,
   resolveComponent,
   useDialog,
+  useGlobal,
   useNuxtApp,
   useRoute,
   useRouter,
@@ -21,6 +23,8 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
+const { isMobileMode } = useGlobal()
+
 const { activeTab } = useTabs()
 
 const { views, loadViews, isLoading } = useViews(meta)
@@ -47,7 +51,8 @@ const { isOpen } = useSidebar('nc-right-sidebar')
 const sidebarCollapsed = computed(() => !isOpen.value)
 
 /** Sidebar ref */
-const 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(
@@ -133,9 +138,22 @@ 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"
@@ -165,6 +183,7 @@ function onOpenModal({
         </template>
       </div>
     </a-layout-sider>
+  </div>
 </template>
 
 <style scoped>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
+import { useGlobal } from '../../composables/useGlobal'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -63,6 +64,7 @@ provide(
   ReadonlyInj,
   computed(() => !isUIAllowed('xcDatatableEditable')),
 )
+
 </script>
 
 <template>