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); const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
// refs // refs
const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>(); const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
const initialWidthRef = useRef<number>(0);
const initialMouseXRef = useRef<number>(0);
// handlers // handlers
const setShowPeek = useCallback( const setShowPeek = useCallback(
@ -62,15 +64,22 @@ export function ResizableSidebar({
const handleResize = useCallback( const handleResize = useCallback(
(e: MouseEvent) => { (e: MouseEvent) => {
if (!isResizing) return; 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); setWidth(newWidth);
}, },
[isResizing, minWidth, maxWidth, setWidth] [isResizing, minWidth, maxWidth, setWidth]
); );
const startResizing = useCallback(() => { const startResizing = useCallback(
setIsResizing(true); (e: React.MouseEvent) => {
}, []); setIsResizing(true);
initialWidthRef.current = width;
initialMouseXRef.current = e.clientX;
},
[width]
);
const stopResizing = useCallback(() => { const stopResizing = useCallback(() => {
setIsResizing(false); setIsResizing(false);
@ -199,7 +208,7 @@ export function ResizableSidebar({
> >
<aside <aside
className={cn( 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" isAnyExtendedSidebarExpanded && "rounded-none"
)} )}
> >
@ -215,7 +224,7 @@ export function ResizableSidebar({
)} )}
// onDoubleClick toggle sidebar // onDoubleClick toggle sidebar
onDoubleClick={() => toggleCollapsed()} onDoubleClick={() => toggleCollapsed()}
onMouseDown={startResizing} onMouseDown={(e) => startResizing(e)}
role="separator" role="separator"
aria-label="Resize sidebar" aria-label="Resize sidebar"
/> />
@ -273,7 +282,7 @@ export function ResizableSidebar({
)} )}
// onDoubleClick toggle sidebar // onDoubleClick toggle sidebar
onDoubleClick={() => toggleCollapsed()} onDoubleClick={() => toggleCollapsed()}
onMouseDown={startResizing} onMouseDown={(e) => startResizing(e)}
role="separator" role="separator"
aria-label="Resize sidebar" aria-label="Resize sidebar"
/> />