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

---
 .../components/smartsheet/sidebar/mobile.vue  | 71 +++++++++----------
 .../nc-gui/components/tabs/Smartsheet.vue     |  2 +-
 .../pages/[projectType]/[projectId]/index.vue |  7 +-
 3 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
index d5d0aed288..b3c6f6fda0 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
@@ -139,47 +139,46 @@ function onOpenModal({
 onMounted(async () => {
   await loadViews()
 })
-
 </script>
 
 <template>
-  <div>
-    MOBILE
-    <!-- <br />
+  <!-- <div> -->
+  <!-- MOBILE -->
+  <!-- <br />
     META: {{ JSON.stringify(meta) }} -->
-    <br />
+  <!-- <br />
     VIEWS: {{ JSON.stringify(views.length) }}
-    <br />
-    <a-layout-sider
-      ref="sidebar"
-      :collapsed="sidebarCollapsed"
-      collapsiple
-      collapsed-width="0"
-      width="0"
-      class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
-      theme="light"
-    >
-      <LazySmartsheetSidebarToolbar
-        class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
-      />
-
-      <div class="flex-1 flex flex-col min-h-0">
-        <GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
-          <div class="w-full h-full flex items-center justify-center">
-            <a-spin />
-          </div>
-        </GeneralOverlay>
-
-        <LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
-
-        <template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
-          <div class="!my-3 w-full border-b-1" />
-
-          <LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
-        </template>
-      </div>
-    </a-layout-sider>
-  </div>
+    <br /> -->
+  <a-layout-sider
+    ref="sidebar"
+    :collapsed="sidebarCollapsed"
+    collapsiple
+    collapsed-width="0"
+    width="0"
+    class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
+    theme="light"
+  >
+    <LazySmartsheetSidebarToolbar
+      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
+    />
+
+    <div class="flex-1 flex flex-col min-h-0">
+      <GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
+        <div class="w-full h-full flex items-center justify-center">
+          <a-spin />
+        </div>
+      </GeneralOverlay>
+
+      <LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
+
+      <template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
+        <div class="!my-3 w-full border-b-1" />
+
+        <LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
+      </template>
+    </div>
+  </a-layout-sider>
+  <!-- </div> -->
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index a161bdee9c..5b7dee0957 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -111,7 +111,7 @@ onMounted(() => {
     <!-- {{  JSON.stringify(metas) }} -->
     <!-- <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" /> -->
     <div class="flex flex-col h-full flex-1 min-w-0" ref="mainArea">
-      LazySmartsheetToolbar: <LazySmartsheetToolbar />
+      <LazySmartsheetToolbar />
 
       <Transition name="layout" mode="out-in">
         <template v-if="meta">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 53ae14d86b..5f7cb98af3 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -191,9 +191,13 @@ onBeforeMount(async () => {
   }
 })
 
+const showViewsMenu = ref(false)
+
 const FOO = (ev: GlobalEvents) => {
+  // TODO: filter for event type
   console.log(ev)
   // alert('event')
+  showViewsMenu.value = true
   if (isMobileMode) {
     toggle(false)
   }
@@ -610,9 +614,10 @@ provide(MetaInj, meta)
           </div>
         </div>
 
-        <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
+        <LazyDashboardTreeView v-show="!showViewsMenu" @create-base-dlg="toggleDialog(true, 'dataSources')" />
         <!-- v-show="isMobileRightSidebarOpen" -->
         SmartsheetSidebarMobile IN INDEX<SmartsheetSidebarMobile
+          v-show="showViewsMenu" 
           v-if="meta && isMobileMode"
           class="nc-left-sidebar-mobile"
         />SmartsheetSidebarMobile IN INDEX END