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

---
 .../components/smartsheet/sidebar/mobile.vue  | 73 ++++++++++---------
 .../pages/[projectType]/[projectId]/index.vue | 17 ++---
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
index 8985febdca..db102473eb 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
@@ -44,9 +44,12 @@ const route = useRoute()
 const { $e } = useNuxtApp()
 
 /** Sidebar visible */
-const { isOpen } = useSidebar('nc-right-sidebar')
+// const { isOpen } = useSidebar('nc-right-sidebar')
+// const FOO = useSidebar('nc-right-sidebar')
+// FOO.
 
-const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
+// const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
+const sidebarCollapsed = false
 
 /** Sidebar ref */
 const sidebar = ref()
@@ -138,39 +141,39 @@ function onOpenModal({
 </script>
 
 <template>
-  <div>
-    Mobile Views Menu <br />
-    views: {{ views.length }}
-    <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>
+  <!-- <div> -->
+  <!-- Mobile Views Menu <br />
+    views: {{ views.length }} -->
+  <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/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 6efaa9e282..cb9ca8712e 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
+import type { TableType } from 'nocodb-sdk'
 import {
   TabType,
   computed,
@@ -29,7 +30,6 @@ import {
   useTheme,
   useUIPermission,
 } from '#imports'
-import { TableType } from 'nocodb-sdk'
 
 definePageMeta({
   hideHeader: true,
@@ -66,9 +66,6 @@ const dataSourcesState = ref<string>('')
 
 const dropdownOpen = ref(false)
 
-
-
-
 const { activeTab } = useTabs()
 const { metas } = useMetas()
 // const { tables } = useProject()
@@ -76,8 +73,7 @@ const { metas } = useMetas()
 const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
 provide(MetaInj, meta)
 
-
-
+const showViewsMobileSidebar = ref(false)
 
 /** Sidebar ref */
 const sidebar = ref()
@@ -589,7 +585,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
             :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
           >
-          <!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
+            <!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
             <MdiBackburger
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
@@ -602,8 +598,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         <!-- v-show="isMobileRightSidebarOpen"  -->
         <!-- meta: {{  JSON.stringify(meta) }} <br />
         isMobileMode: {{  JSON.stringify(isMobileMode) }} <br /> -->
-        <SmartsheetSidebarMobile v-if="meta && isMobileMode" class="nc-left-sidebar-mobile" />
-        <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
+        <LazyDashboardTreeView
+          v-if="!(isMobileMode && showViewsMobileSidebar)"
+          @create-base-dlg="toggleDialog(true, 'dataSources')"
+        />
+        <SmartsheetSidebarMobile v-if="meta && isMobileMode && showViewsMobileSidebar" class="nc-left-sidebar-mobile" />
       </a-layout-sider>
     </template>