mobile optimisations - add mobile mode toggle button to left menu (WIP)

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

@@ -66,8 +66,8 @@ const dataSourcesState = ref<string>('')
 const dropdownOpen = ref(false)
 
 /** Sidebar ref */
-const sidebar = ref()
+const sidebar = ref<HTMLElement | null>(null)
-const toggleSideBarButton = ref()
+const toggleSideBarButton = ref<HTMLElement>()
 
 const email = computed(() => user.value?.email ?? '---')
 
@@ -188,17 +188,45 @@ onBeforeMount(async () => {
   }
 })
 
-const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => {
+const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) => {
   // if (!event.target.matches('.show-sidebar-button')) {
   //   this.sidebarVisible = false
   // }
 
-  console.log('event.target', event.target)
+  // event.stopPropagation()
-  console.log('toggleSideBarButton.value', toggleSideBarButton.value)
+  // event.preventDefault()
+
+  if (!isMobileMode.value) {
+    return
+  }
+
+  // alert('isMobileMode')
+
   console.log('inside of hideSidebarOnClickOrTouchIfMobileMode')
   console.log('isOpen.value', isOpen.value)
+  console.log('event.target')
+  console.log(event.target)
+  console.log('-------')
+  console.log('toggleSideBarButton.value')
+  console.log(toggleSideBarButton.value)
+  console.log('toggleSideBarButton.value?.contains(event.target as Node)')
+  console.log(toggleSideBarButton.value?.contains(event.target as Node))
   console.log('event.target !== toggleSideBarButton.value', event.target !== toggleSideBarButton.value)
   console.log('------------')
+
+  // console.log('sidebar.value')
+  // console.log(sidebar.value)
+  // debugger
+
+  // console.log('sidebar.value?.contains(event.target as Node)')
+  // console.log(sidebar.value?.contains(event.target as Node))
+
+  // debugger
+  if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) {
+    // alert('now')
+    toggle(false)
+  }
+
   // debugger
   // if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) {
   // if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) {
@@ -207,15 +235,15 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => {
 }
 
 onMounted(() => {
-  toggle(true)
+  toggle(false)
   toggleHasSidebar(true)
-  document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  // TODO: use useEventListener instead of onMounted and onBeforeUnmount
-  document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
 })
-
 onBeforeUnmount(() => {
-  document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
-  document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
 })
 
 onBeforeUnmount(reset)
@@ -265,9 +293,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
 const FOO_ON_OPEN_CLICK = () => {
   console.log('inside of FOO_ON_OPEN_CLICK')
-  toggle(!isOpen)
+  // toggle(!isOpen)
 }
-
 </script>
 
 <template>
@@ -604,16 +631,16 @@ const FOO_ON_OPEN_CLICK = () => {
           </a-dropdown>
 
           <div
+            ref="toggleSideBarButton"
             class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
             style="background-color: 'red'; color: 'green'"
             :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
+            @click.prevent.stop="FOO_ON_OPEN_CLICK"
           >
             <MdiBackburger
-              ref="toggleSideBarButton"
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
-              @click.prevent.stop="FOO_ON_OPEN_CLICK"
             />
           </div>
         </div>