[dashboardLayout] Support a resizable drawer

[prakhargupta1]

Currently, we support a sidebarExpandedWidth prop in DashboardLayout. But it remains fixed for the end user. It could be interesting to offer a draggable handle to let them resize it.

Originally posted by @Janpot in #4266 (comment)

---

Example

https://drag-to-resize-sidebar.vercel.app/

[kdj309]

Hi @prakhargupta1 I am working on this issue, My Approach is to create a Custom ResizePanel Component and allow the user to resize in bigger view ports

import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/material';

const StyledResizeHandle = styled(Box)(({ theme }) => ({
  position: 'absolute',
  right: -4,
  top: 0,
  bottom: 0,
  width: 8,
  cursor: 'col-resize',
  '&:hover': {
    '&::after': {
      backgroundColor: theme.palette.primary.main,
    },
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 4,
    width: 1,
    height: '100%',
    backgroundColor: theme.palette.divider,
    transition: theme.transitions.create('background-color'),
  },
}));

export interface ResizeHandleProps {
  onResize: (newWidth: number) => void;
}

export function ResizeHandle({ onResize }: ResizeHandleProps) {
  const handleMouseDown = React.useCallback((event: React.MouseEvent) => {
    const startX = event.clientX;
    const handleMouseMove = (moveEvent: MouseEvent) => {
      const delta = moveEvent.clientX - startX;
      onResize(delta);
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, [onResize]);

  return <StyledResizeHandle onMouseDown={handleMouseDown} />;
}

And use it on the getDrawerContent Dashboard like this

const handleResize = React.useCallback((delta: number) => {
  setCurrentSidebarWidth((prev) => {
    const newWidth = typeof prev === 'number' ? prev + delta : parseInt(prev, 10) + delta;
    return Math.max(240, Math.min(newWidth, 600)); // Min 240px, max 600px
  });
}, []);

{!isDesktopMini && !disableCollapsibleSidebar && (
  <ResizeHandle onResize={handleResize} />
)}

My question is, do we need to use a library like React-Split for this feature, or do custom components work?
And from a user perspective, it should be optional, so are we keeping it?

waiting for the answers
Thanks and Regards
Kartik Joshi

[kdj309]

Hi @prakhargupta1, I am on this feature, please let me know how to proceed further?