fix(nc-gui): sidebar width issue if user hide & reload page (#8972)

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

@@ -42,7 +42,7 @@ const mobileNormalizedContentSize = computed(() => {
 
 watch(currentSidebarSize, () => {
   leftSidebarWidthPercent.value = (currentSidebarSize.value / viewportWidth.value) * 100
-  setLeftSidebarSize(currentSidebarSize.value)
+  setLeftSidebarSize({ current: currentSidebarSize.value, old: sideBarSize.value.old })
 })
 
 const sidebarWidth = computed(() => (isMobileMode.value ? viewportWidth.value : sideBarSize.value.old))
@@ -102,6 +102,11 @@ function handleMouseMove(e: MouseEvent) {
 function onWindowResize(e?: any): void {
   viewportWidth.value = window.innerWidth
 
+  // if user hide sidebar and refresh the page then sidebar will be visible again so we have to set sidebar width
+  if (!e && isLeftSidebarOpen.value && !sideBarSize.value.current && !isMobileMode.value) {
+    currentSidebarSize.value = sideBarSize.value.old
+  }
+
   leftSidebarWidthPercent.value = (currentSidebarSize.value / viewportWidth.value) * 100
 
   // if sidebar width is greater than normalized width and this function is called from window resize event (not from template) update left sidebar width

packages/nc-gui/composables/useGlobal/actions.ts

@@ -160,8 +160,11 @@ export function useGlobalActions(state: State): Actions {
     state.gridViewPageSize.value = pageSize
   }
 
-  const setLeftSidebarSize = (size: number) => {
-    state.leftSidebarSize.value = size
+  const setLeftSidebarSize = ({ old, current }: { old?: number; current?: number }) => {
+    state.leftSidebarSize.value = {
+      old: old ?? state.leftSidebarSize.value.old,
+      current: current ?? state.leftSidebarSize.value.current,
+    }
   }
 
   return {

packages/nc-gui/composables/useGlobal/state.ts

@@ -58,7 +58,10 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     isMobileMode: null,
     lastOpenedWorkspaceId: null,
     gridViewPageSize: 25,
-    leftSidebarSize: INITIAL_LEFT_SIDEBAR_WIDTH,
+    leftSidebarSize: {
+      old: INITIAL_LEFT_SIDEBAR_WIDTH,
+      current: INITIAL_LEFT_SIDEBAR_WIDTH,
+    },
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */

packages/nc-gui/composables/useGlobal/types.ts

@@ -53,7 +53,10 @@ export interface StoredState {
   isMobileMode: boolean | null
   lastOpenedWorkspaceId: string | null
   gridViewPageSize: number
-  leftSidebarSize: number
+  leftSidebarSize: {
+    old: number
+    current: number
+  }
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
@@ -90,7 +93,7 @@ export interface Actions {
   getBaseUrl: (workspaceId: string) => string | undefined
   getMainUrl: (workspaceId: string) => string | undefined
   setGridViewPageSize: (pageSize: number) => void
-  setLeftSidebarSize: (size: number) => void
+  setLeftSidebarSize: (params: { old?: number; current?: number }) => void
 }
 
 export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>

packages/nc-gui/store/sidebar.ts

@@ -6,7 +6,7 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
   const isViewPortMobile = () => {
     return width.value < MAX_WIDTH_FOR_MOBILE_MODE
   }
-  const { isMobileMode, leftSidebarSize: _leftSidebarSize, setLeftSidebarSize } = useGlobal()
+  const { isMobileMode, leftSidebarSize: _leftSidebarSize } = useGlobal()
 
   const tablesStore = useTablesStore()
   const _isLeftSidebarOpen = ref(!isViewPortMobile())
@@ -22,8 +22,8 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
   const isRightSidebarOpen = ref(true)
 
   const leftSideBarSize = ref({
-    old: _leftSidebarSize.value ?? INITIAL_LEFT_SIDEBAR_WIDTH,
-    current: isViewPortMobile() ? 0 : _leftSidebarSize.value ?? INITIAL_LEFT_SIDEBAR_WIDTH,
+    old: _leftSidebarSize.value?.old ?? INITIAL_LEFT_SIDEBAR_WIDTH,
+    current: isViewPortMobile() ? 0 : _leftSidebarSize.value?.current ?? INITIAL_LEFT_SIDEBAR_WIDTH,
   })
 
   const leftSidebarWidthPercent = ref((leftSideBarSize.value.current / width.value) * 100)