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

packages/nc-gui/composables/useGlobal/state.ts

@@ -70,6 +70,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     currentVersion: null,
     latestRelease: null,
     hiddenRelease: null,
+    isMobileMode: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
@@ -114,8 +115,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   /** our local user object */
   const user = ref<User | null>(null)
 
-  const isMobileMode = ref<boolean>(false)
-
   return {
     ...toRefs(storage.value),
     storage,
@@ -126,6 +125,5 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     error,
     user,
     appInfo,
-    isMobileMode,
   }
 }

packages/nc-gui/composables/useGlobal/types.ts

@@ -39,6 +39,7 @@ export interface StoredState {
   currentVersion: string | null
   latestRelease: string | null
   hiddenRelease: string | null
+  isMobileMode: boolean | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
@@ -50,7 +51,6 @@ export type State = ToRefs<Omit<StoredState, 'token'>> & {
   runningRequests: ReturnType<typeof useCounter>
   error: Ref<any>
   appInfo: Ref<AppInfo>
-  isMobileMode: Ref<boolean>
 }
 
 export interface Getters {

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

@@ -67,6 +67,7 @@ const dropdownOpen = ref(false)
 
 /** Sidebar ref */
 const sidebar = ref()
+const toggleSideBarButton = ref()
 
 const email = computed(() => user.value?.email ?? '---')
 
@@ -187,9 +188,34 @@ onBeforeMount(async () => {
   }
 })
 
+const hideSidebarOnClickOrTouchIfMobileMode = (event: Event) => {
+  // 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(() => {
   toggle(true)
   toggleHasSidebar(true)
+  document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
 })
 
 onBeforeUnmount(reset)
@@ -236,6 +262,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+const FOO_ON_OPEN_CLICK = () => {
+  console.log('inside of FOO_ON_OPEN_CLICK')
+  toggle(!isOpen)
+}
+
 </script>
 
 <template>
@@ -572,13 +604,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </a-dropdown>
 
           <div
-            class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
+            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 }"
           >
             <MdiBackburger
+              ref="toggleSideBarButton"
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
-              @click="toggle(!isOpen)"
+              @click.prevent.stop="FOO_ON_OPEN_CLICK"
             />
           </div>
         </div>