fix drag to collapse sidebar

This commit is contained in:
jeffvli
2025-11-19 22:19:36 -08:00
parent f2680bb1de
commit 8ac0a27f33
@@ -35,6 +35,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
const mainContentRef = useRef<HTMLDivElement | null>(null); const mainContentRef = useRef<HTMLDivElement | null>(null);
const initialRightWidthRef = useRef<string>(rightWidth); const initialRightWidthRef = useRef<string>(rightWidth);
const initialMouseXRef = useRef<number>(0); const initialMouseXRef = useRef<number>(0);
const wasCollapsedDuringDragRef = useRef<boolean>(false);
useEffect(() => { useEffect(() => {
if (mainContentRef.current && !isResizing && !isResizingRight) { if (mainContentRef.current && !isResizing && !isResizingRight) {
@@ -48,6 +49,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
(position: 'left' | 'right', mouseEvent?: MouseEvent) => { (position: 'left' | 'right', mouseEvent?: MouseEvent) => {
if (position === 'left') { if (position === 'left') {
setIsResizing(true); setIsResizing(true);
wasCollapsedDuringDragRef.current = false;
} else { } else {
setIsResizingRight(true); setIsResizingRight(true);
if (mainContentRef.current && rightSidebarRef.current && mouseEvent) { if (mainContentRef.current && rightSidebarRef.current && mouseEvent) {
@@ -69,11 +71,14 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
const stopResizing = useCallback(() => { const stopResizing = useCallback(() => {
if (isResizing && mainContentRef.current) { if (isResizing && mainContentRef.current) {
const finalWidth = mainContentRef.current.style.getPropertyValue('--sidebar-width'); if (!wasCollapsedDuringDragRef.current) {
if (finalWidth) { const finalWidth = mainContentRef.current.style.getPropertyValue('--sidebar-width');
setSideBar({ collapsed: false, leftWidth: finalWidth }); if (finalWidth) {
setSideBar({ collapsed: false, leftWidth: finalWidth });
}
} }
setIsResizing(false); setIsResizing(false);
wasCollapsedDuringDragRef.current = false;
} else if (isResizingRight && mainContentRef.current) { } else if (isResizingRight && mainContentRef.current) {
const finalWidth = const finalWidth =
mainContentRef.current.style.getPropertyValue('--right-sidebar-width'); mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
@@ -90,11 +95,19 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
if (isResizing) { if (isResizing) {
const width = mouseMoveEvent.clientX; const width = mouseMoveEvent.clientX;
const constrainedWidth = `${constrainSidebarWidth(width)}px`; const constrainedWidthValue = constrainSidebarWidth(width);
const constrainedWidth = `${constrainedWidthValue}px`;
if (width < MINIMUM_SIDEBAR_WIDTH - 100) { if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
setSideBar({ collapsed: true }); if (!wasCollapsedDuringDragRef.current) {
wasCollapsedDuringDragRef.current = true;
setSideBar({ collapsed: true });
}
} else { } else {
if (wasCollapsedDuringDragRef.current) {
wasCollapsedDuringDragRef.current = false;
setSideBar({ collapsed: false });
}
mainContentRef.current.style.setProperty('--sidebar-width', constrainedWidth); mainContentRef.current.style.setProperty('--sidebar-width', constrainedWidth);
} }
} else if (isResizingRight) { } else if (isResizingRight) {