mobile optimisations - work on merging right and left sidebar (WIP)

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

@@ -17,6 +17,8 @@ import {
   watch,
 } from '#imports'
 
+const emits = defineEmits(['closeMobileViewsSidebar'])
+
 const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
@@ -158,7 +160,19 @@ function onOpenModal({
     /> -->
 
     <div
-      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
+      class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2 inline"
+      :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
+    >
+      <!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
+      <MdiBackburger
+        v-e="['c:grid:toggle-navdraw']"
+        class="cursor-pointer transform transition-transform duration-500"
+        @click="emits('closeMobileViewsSidebar')"
+      />
+    </div>
+
+    <div
+      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1 inline"
     >
       <!-- <div class="flex gap-2 justify-start">
       <div class="flex items-center gap-1 text-xs"> -->

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

@@ -208,6 +208,12 @@ const onClickedTableLink = () => {
   }
 }
 
+const onCloseMobileViewsSidebar = () => {
+  if (isMobileMode) {
+    showViewsMobileSidebar.value = false
+  }
+}
+
 onBeforeUnmount(reset)
 
 function openKeyboardShortcutDialog() {
@@ -605,7 +611,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         <!-- meta: {{  JSON.stringify(meta) }} <br />
         isMobileMode: {{  JSON.stringify(isMobileMode) }} <br /> -->
         <LazyDashboardTreeView v-if="!(isMobileMode && showViewsMobileSidebar)" @clicked-table-link="onClickedTableLink" />
-        <SmartsheetSidebarMobile v-if="meta && isMobileMode && showViewsMobileSidebar" class="nc-left-sidebar-mobile" />
+        <SmartsheetSidebarMobile
+          v-if="meta && isMobileMode && showViewsMobileSidebar"
+          class="nc-left-sidebar-mobile"
+          @close-mobile-views-sidebar="onCloseMobileViewsSidebar"
+        />
       </a-layout-sider>
     </template>