Provide a visual element that will collapse/expand the split pane completely

[sdg002]

Is your feature request related to a problem? Please describe.

I would like a visual element which will collapse the Split pane completely. In a single click, I will get to utilize the full screen real estate. This is very beneficial for users with small screens (e.g. laptops)

Describe the solution you'd like

Example from Azure Devops

Example from Azure portal

Describe alternatives you've considered

Not yet considered any alternative.

Additional context

N.a

[tomkp]

This is a feature that can be built on top of v3 using controlled mode and a custom divider:

function CollapsibleDivider({ onCollapse, ...props }) {
  return (
    <div {...props}>
      <button onClick={onCollapse}>◀</button>
    </div>
  );
}

function App() {
  const [sizes, setSizes] = useState([300, null]);
  const [collapsed, setCollapsed] = useState(false);
  
  return (
    <SplitPane 
      divider={(props) => (
        <CollapsibleDivider 
          {...props} 
          onCollapse={() => {
            setCollapsed(!collapsed);
            setSizes(collapsed ? [300, null] : [0, null]);
          }} 
        />
      )}
      onResize={setSizes}
    >
      <Pane size={sizes[0]} minSize={0}>Sidebar</Pane>
      <Pane>Main</Pane>
    </SplitPane>
  );
}

Closing as this can be achieved with the current API. If there's interest in a built-in collapse feature, please open a new discussion.