feat: Added logic to auto close and open sidebar on mobile view based on if view is open, imrpoved nodes of sidebar in mobile, and workspace menu handles for mobile view

packages/nc-gui/assets/style.scss

@@ -598,9 +598,22 @@ input[type='number'] {
 }
 
 .nc-sidebar-node {
-  @apply !sm:h-8.9;
+  @apply !sm:(min-h-8.9 max-h-8.9);
+
+  .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
+    @apply !sm:(hidden)
+  }
 }
 
 .nc-button.ant-btn.nc-sidebar-node-btn {
   @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
 }
+
+
+.nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
+  @apply sm:(opacity-100);
+
+  .nc-icon {
+    @apply sm:(visible opacity-100 !text-gray-500)
+  }
+}

packages/nc-gui/components/dashboard/Sidebar/Header.vue

@@ -5,12 +5,18 @@ const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
 const { activeWorkspace, isWorkspaceLoading } = storeToRefs(workspaceStore)
 
+const { activeViewTitleOrId } = storeToRefs(useViewsStore())
+
+const { activeTableId } = storeToRefs(useTablesStore())
+
 const { isMobileMode } = useGlobal()
+
+const showSidebarBtn = computed(() => !(isMobileMode.value && !activeViewTitleOrId.value && !activeTableId.value))
 </script>
 
 <template>
   <div
-    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group sm:(px-2 py-1.2) md:(px-1 py-1)"
+    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group md:(px-2 py-1.2) sm:(px-1 py-1)"
     :data-workspace-title="activeWorkspace?.title"
     style="height: var(--topbar-height)"
   >
@@ -35,6 +41,7 @@ const { isMobileMode } = useGlobal()
           }}
         </template>
         <NcButton
+          v-if="showSidebarBtn"
           :type="isMobileMode ? 'secondary' : 'text'"
           :size="isMobileMode ? 'medium' : 'small'"
           class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !sm:(h-10.5 max-h-10.5 max-w-10.5) !md:(hover:bg-gray-200)"

packages/nc-gui/components/dashboard/Sidebar/TopSection.vue

@@ -4,7 +4,7 @@ const projectStore = useProject()
 
 const { isUIAllowed } = useRoles()
 
-const { appInfo, isMobileMode } = useGlobal()
+const { appInfo } = useGlobal()
 
 const { isWorkspaceLoading, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
 
@@ -47,10 +47,10 @@ const navigateToSettings = () => {
       <DashboardSidebarTopSectionHeader />
 
       <NcButton
-        v-if="isUIAllowed('workspaceSettings') && !isMobileMode"
+        v-if="isUIAllowed('workspaceSettings')"
         type="text"
         size="small"
-        class="nc-sidebar-top-button"
+        class="nc-sidebar-top-button !sm:hidden"
         data-testid="nc-sidebar-team-settings-btn"
         :centered="false"
         :class="{
@@ -65,11 +65,10 @@ const navigateToSettings = () => {
         </div>
       </NcButton>
       <WorkspaceCreateProjectBtn
-        v-if="!isMobileMode"
         v-model:is-open="isCreateProjectOpen"
         modal
         type="text"
-        class="nc-sidebar-top-button !hover:bg-gray-200"
+        class="nc-sidebar-top-button !hover:bg-gray-200 !sm:hidden"
         data-testid="nc-sidebar-create-project-btn"
       >
         <div class="gap-x-2 flex flex-row w-full items-center !font-normal">

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -35,6 +35,8 @@ const project = inject(ProjectInj)!
 
 const projectsStore = useProjects()
 
+const { isMobileMode } = useGlobal()
+
 const { loadProject, loadProjects, createProject: _createProject, updateProject, getProjectMetaInfo } = projectsStore
 const { projects } = storeToRefs(projectsStore)
 
@@ -234,6 +236,9 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to
     return
   }
 
+  ignoreNavigation = isMobileMode.value || ignoreNavigation
+  toggleIsExpanded = isMobileMode.value || toggleIsExpanded
+
   if (toggleIsExpanded) {
     project.isExpanded = !project.isExpanded
   } else {
@@ -379,7 +384,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
         <div
           ref="projectNodeRefs"
           :class="{
-            'bg-primary-selected active': activeProjectId === project.id && projectViewOpen,
+            'bg-primary-selected active': activeProjectId === project.id && projectViewOpen && !isMobileMode,
             'hover:bg-gray-200': !(activeProjectId === project.id && projectViewOpen),
           }"
           :data-testid="`nc-sidebar-project-title-${project.title}`"
@@ -388,12 +393,12 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           <NcButton
             type="text"
             size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75"
+            class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !sm:visible"
             @click="onProjectClick(project, true, true)"
           >
             <GeneralIcon
               icon="triangleFill"
-              class="absolute top-2.25 left-2 group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90"
+              class="group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !sm:visible"
               :class="{ '!rotate-180': project.isExpanded, '!visible': isOptionsOpen }"
             />
           </NcButton>
@@ -426,7 +431,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             ref="input"
             v-model="tempTitle"
             class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent w-4/5"
-            :class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }"
+            :class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen && !isMobileMode }"
             @click.stop
             @keyup.enter="updateProjectTitle"
             @keyup.esc="updateProjectTitle"

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -148,10 +148,10 @@ const isTableOpened = computed(() => {
         @click="openTable(table)"
       >
         <div class="flex flex-row h-full items-center">
-          <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn" @click.stop="onExpand">
+          <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn nc-sidebar-expand" @click.stop="onExpand">
             <GeneralIcon
               icon="triangleFill"
-              class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90 hover:bg-"
+              class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>

packages/nc-gui/components/dashboard/TreeView/ViewsList.vue

@@ -348,6 +348,7 @@ function onOpenModal({
 <template>
   <DashboardTreeViewCreateViewBtn
     v-if="isUIAllowed('viewCreateOrEdit')"
+    class="!sm:hidden"
     :overlay-class-name="isDefaultBase ? '!left-18 !min-w-42' : '!left-25 !min-w-42'"
   >
     <NcButton
@@ -368,6 +369,17 @@ function onOpenModal({
     </NcButton>
   </DashboardTreeViewCreateViewBtn>
 
+  <div
+    v-if="!views.length"
+    class="text-gray-500 my-1.5 md:hidden"
+    :class="{
+      'ml-19.25': isDefaultBase,
+      'ml-24.75': !isDefaultBase,
+    }"
+  >
+    No Views
+  </div>
+
   <a-menu
     ref="menuRef"
     :class="{ dragging }"

packages/nc-gui/components/dashboard/View.vue

@@ -27,6 +27,8 @@ const currentSidebarSize = computed({
   },
 })
 
+const { handleSidebarOpenOnMobileForNonViews } = useConfigStore()
+
 const contentSize = computed(() => 100 - sideBarSize.value.current)
 
 const mobileNormalizedSidebarSize = computed(() => {
@@ -116,6 +118,10 @@ watch(route, () => {
 watch(isMobileMode, () => {
   isLeftSidebarOpen.value = !isMobileMode.value
 })
+
+onMounted(() => {
+  handleSidebarOpenOnMobileForNonViews()
+})
 </script>
 
 <template>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -47,7 +47,10 @@ const meta = computed<TableType | undefined>(() => {
   return viewId && metas.value[viewId]
 })
 
-const { activeView, openedViewsTab } = storeToRefs(useViewsStore())
+const { handleSidebarOpenOnMobileForNonViews } = useConfigStore()
+const { activeTableId } = storeToRefs(useTablesStore())
+
+const { activeView, openedViewsTab, activeViewTitleOrId } = storeToRefs(useViewsStore())
 const { isGallery, isGrid, isForm, isKanban, isLocked, isMap } = useProvideSmartsheetStore(activeView, meta)
 
 useSqlEditor()
@@ -153,6 +156,10 @@ const onDrop = async (event: DragEvent) => {
     console.log('error', e)
   }
 }
+
+watch([activeViewTitleOrId, activeTableId], () => {
+  handleSidebarOpenOnMobileForNonViews()
+})
 </script>
 
 <template>

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

@@ -6,6 +6,8 @@ import { message, ref, resolveComponent, storeToRefs, useDialog, useFileDialog,
 const projectStore = useProject()
 const { project } = storeToRefs(projectStore)
 
+const { isMobileMode } = useGlobal()
+
 const { files, reset } = useFileDialog()
 
 const { bases } = storeToRefs(projectStore)
@@ -129,5 +131,5 @@ watch(
 </script>
 
 <template>
-  <ProjectView />
+  <ProjectView v-if="!isMobileMode" />
 </template>

packages/nc-gui/store/config.ts

@@ -1,10 +1,14 @@
-import { defineStore } from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { isViewPortMobile } from '~/utils'
 
 export const useConfigStore = defineStore('configStore', () => {
   const { isMobileMode: globalIsMobile } = useGlobal()
-  const isMobileMode = ref(window.innerWidth < 820)
 
-  const isViewPortMobile = () => window.innerWidth < 820
+  const sidebarStore = useSidebarStore()
+  const viewsStore = useViewsStore()
+  const tablesStore = useTablesStore()
+
+  const isMobileMode = ref(window.innerWidth < 820)
 
   const onViewPortResize = () => {
     isMobileMode.value = isViewPortMobile()
@@ -35,8 +39,29 @@ export const useConfigStore = defineStore('configStore', () => {
     },
   )
 
+  const handleSidebarOpenOnMobileForNonViews = () => {
+    if (!isViewPortMobile()) return
+
+    if (!viewsStore.activeViewTitleOrId && !tablesStore.activeTableId) {
+      nextTick(() => {
+        sidebarStore.isLeftSidebarOpen = true
+      })
+    } else {
+      sidebarStore.isLeftSidebarOpen = false
+    }
+  }
+
+  watch([viewsStore.activeViewTitleOrId, tablesStore.activeTableId], () => {
+    handleSidebarOpenOnMobileForNonViews()
+  })
+
   return {
     isMobileMode,
     isViewPortMobile,
+    handleSidebarOpenOnMobileForNonViews,
   }
 })
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useConfigStore as any, import.meta.hot))
+}

packages/nc-gui/store/sidebar.ts

@@ -1,8 +1,7 @@
-import { defineStore } from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { isViewPortMobile } from '~/utils'
 
 export const useSidebarStore = defineStore('sidebarStore', () => {
-  const { isViewPortMobile } = useConfigStore()
-
   const isLeftSidebarOpen = ref(!isViewPortMobile())
   const isRightSidebarOpen = ref(true)
 
@@ -36,3 +35,7 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
     rightSidebarState,
   }
 })
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useSidebarStore as any, import.meta.hot))
+}

packages/nc-gui/utils/index.ts

@@ -27,3 +27,5 @@ export * from './workerUtils'
 export * from './parsersUtils'
 
 export const isEeUI = false
+
+export const isViewPortMobile = () => window.innerWidth < 820