From 8aecb221dc8e1f2ea4ee3ef48743ab2382a0c12f Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Sat, 7 Jan 2023 12:38:55 +0100
Subject: [PATCH] mobile optimisations - work on merging right and left sidebar
 (WIP)

---
 .../components/smartsheet/sidebar/mobile.vue     | 16 +++++++++++++++-
 .../pages/[projectType]/[projectId]/index.vue    | 12 +++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
index 59511cc0ed..7a68de666f 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
+++ b/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"> -->
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index fe70bcd7c0..c6315348fc 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/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>