Merge pull request #6896 from nocodb/nc-fix/resize-min-max-width-configured-for-desktop

fix: Added min and max width for sidebar size for desktop

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

@@ -89,6 +89,8 @@ function handleMouseMove(e: MouseEvent) {
 
 function onWindowResize() {
   viewportWidth.value = window.innerWidth
+
+  onResize(currentSidebarSize.value)
 }
 
 onMounted(() => {
@@ -122,25 +124,56 @@ watch(sidebarState, () => {
 onMounted(() => {
   handleSidebarOpenOnMobileForNonViews()
 })
+
+function onResize(widthPercent: any) {
+  if (isMobileMode.value) return
+
+  const width = (widthPercent * viewportWidth.value) / 100
+
+  const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+
+  const widthRem = width / fontSize
+
+  if (widthRem < 16) {
+    currentSidebarSize.value = ((16 * fontSize) / viewportWidth.value) * 100
+    return
+  } else if (widthRem > 23.5) {
+    currentSidebarSize.value = ((23.5 * fontSize) / viewportWidth.value) * 100
+    return
+  }
+
+  console.log('onResize', widthRem, fontSize)
+  currentSidebarSize.value = widthPercent
+}
+
+watch(
+  () => sideBarSize.value.current,
+  () => {
+    console.log('sidebarState', sideBarSize.value.current)
+  },
+)
 </script>
 
 <template>
   <Splitpanes
-    class="nc-sidebar-content-resizable-wrapper w-full h-full"
+    class="nc-sidebar-content-resizable-wrapper !w-screen h-full"
     :class="{
       'hide-resize-bar': !isLeftSidebarOpen || sidebarState === 'openStart',
     }"
-    @resize="currentSidebarSize = $event[0].size"
+    @resize="(event: any) => onResize(event[0].size)"
   >
     <Pane
       min-size="15%"
       :size="mobileNormalizedSidebarSize"
       max-size="40%"
-      class="nc-sidebar-splitpane relative !overflow-visible"
+      class="nc-sidebar-splitpane !sm:(min-w-64 max-w-94) relative !overflow-visible"
+      :style="{
+        width: `${mobileNormalizedSidebarSize}%`,
+      }"
     >
       <div
         ref="wrapperRef"
-        class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-12 absolute overflow-visible"
+        class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !sm:(min-w-64 max-w-94) absolute overflow-visible"
         :class="{
           'mobile': isMobileMode,
           'minimized-height': !isLeftSidebarOpen,
@@ -153,7 +186,12 @@ onMounted(() => {
         <slot name="sidebar" />
       </div>
     </Pane>
-    <Pane :size="mobileNormalizedContentSize">
+    <Pane
+      :size="mobileNormalizedContentSize"
+      :style="{
+        width: `${100 - mobileNormalizedSidebarSize}%`,
+      }"
+    >
       <slot name="content" />
     </Pane>
   </Splitpanes>