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

---
 .../components/smartsheet/sidebar/mobile.vue  | 74 +++++++++----------
 .../pages/[projectType]/[projectId]/index.vue | 18 +++++
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
index b3c6f6fda0..8985febdca 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
@@ -135,50 +135,42 @@ function onOpenModal({
     close(1000)
   }
 }
-
-onMounted(async () => {
-  await loadViews()
-})
 </script>
 
 <template>
-  <!-- <div> -->
-  <!-- MOBILE -->
-  <!-- <br />
-    META: {{ JSON.stringify(meta) }} -->
-  <!-- <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> -->
+  <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 962878391e..6efaa9e282 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -29,6 +29,7 @@ import {
   useTheme,
   useUIPermission,
 } from '#imports'
+import { TableType } from 'nocodb-sdk'
 
 definePageMeta({
   hideHeader: true,
@@ -65,6 +66,19 @@ const dataSourcesState = ref<string>('')
 
 const dropdownOpen = ref(false)
 
+
+
+
+const { activeTab } = useTabs()
+const { metas } = useMetas()
+// const { tables } = useProject()
+// const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
+const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
+provide(MetaInj, meta)
+
+
+
+
 /** Sidebar ref */
 const sidebar = ref()
 
@@ -585,6 +599,10 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </div>
         </div>
 
+        <!-- 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')" />
       </a-layout-sider>
     </template>