diff --git a/packages/nc-gui/components/dashboard/View.vue b/packages/nc-gui/components/dashboard/View.vue index e9390e8e19..e5b781937f 100644 --- a/packages/nc-gui/components/dashboard/View.vue +++ b/packages/nc-gui/components/dashboard/View.vue @@ -125,6 +125,11 @@ onMounted(() => { handleSidebarOpenOnMobileForNonViews() }) +const remToPx = (rem: number) => { + const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) + return rem * fontSize +} + function onResize(widthPercent: any) { if (isMobileMode.value) return @@ -135,23 +140,31 @@ function onResize(widthPercent: any) { const widthRem = width / fontSize if (widthRem < 16) { - currentSidebarSize.value = ((16 * fontSize) / viewportWidth.value) * 100 + sideBarSize.value.old = ((16 * fontSize) / viewportWidth.value) * 100 + if (isLeftSidebarOpen.value) sideBarSize.value.current = sideBarSize.value.old return } else if (widthRem > 23.5) { - currentSidebarSize.value = ((23.5 * fontSize) / viewportWidth.value) * 100 + sideBarSize.value.old = ((23.5 * fontSize) / viewportWidth.value) * 100 + if (isLeftSidebarOpen.value) sideBarSize.value.current = sideBarSize.value.old + return } - console.log('onResize', widthRem, fontSize) - currentSidebarSize.value = widthPercent + sideBarSize.value.old = widthPercent + sideBarSize.value.current = sideBarSize.value.old } -watch( - () => sideBarSize.value.current, - () => { - console.log('sidebarState', sideBarSize.value.current) - }, -) +const normalizedWidth = computed(() => { + const maxSize = remToPx(23.5) + const minSize = remToPx(16) + if (sidebarWidth.value > maxSize) { + return maxSize + } else if (sidebarWidth.value < minSize) { + return minSize + } else { + return sidebarWidth.value + } +})