binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4477] fix: sidebar resize behaviour #7386

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-07-11 04:16:36 +05:30 • committed by GitHub
parent 5fbe411e04
commit bb48250467
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
apps/web/core/components/sidebar/resizable-sidebar.tsx
View file

@ -50,6 +50,8 @@ export function ResizableSidebar({
const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
// refs
const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
const initialWidthRef = useRef<number>(0);
const initialMouseXRef = useRef<number>(0);
// handlers
const setShowPeek = useCallback(
@ -62,15 +64,22 @@ export function ResizableSidebar({
const handleResize = useCallback(
(e: MouseEvent) => {
if (!isResizing) return;
const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
const deltaX = e.clientX - initialMouseXRef.current;
const newWidth = Math.min(Math.max(initialWidthRef.current + deltaX, minWidth), maxWidth);
setWidth(newWidth);
},
[isResizing, minWidth, maxWidth, setWidth]
);
const startResizing = useCallback(() => {
setIsResizing(true);
}, []);
const startResizing = useCallback(
(e: React.MouseEvent) => {
setIsResizing(true);
initialWidthRef.current = width;
initialMouseXRef.current = e.clientX;
},
[width]
);
const stopResizing = useCallback(() => {
setIsResizing(false);
@ -199,7 +208,7 @@ export function ResizableSidebar({
>
<aside
className={cn(
"group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-3",
"group/sidebar h-full w-full bg-custom-sidebar-background-100 overflow-hidden relative flex flex-col pt-3",
isAnyExtendedSidebarExpanded && "rounded-none"
)}
>
@ -215,7 +224,7 @@ export function ResizableSidebar({
)}
// onDoubleClick toggle sidebar
onDoubleClick={() => toggleCollapsed()}
onMouseDown={startResizing}
onMouseDown={(e) => startResizing(e)}
role="separator"
aria-label="Resize sidebar"
/>
@ -273,7 +282,7 @@ export function ResizableSidebar({
)}
// onDoubleClick toggle sidebar
onDoubleClick={() => toggleCollapsed()}
onMouseDown={startResizing}
onMouseDown={(e) => startResizing(e)}
role="separator"
aria-label="Resize sidebar"
/>