Browse Source

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

pull/6896/head
Muhammed Mustafa 1 year ago
parent
commit
7328c6c0ec
  1. 48
      packages/nc-gui/components/dashboard/View.vue

48
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>

Loading…
Cancel
Save