How to set a panel collapsed by default?

[jsartisan]

Is there a way to collapse a panel by default? I am creating this layout: and I want the console panel to be collapsed by default. I don't see any prop that can do it.

[bvaughn]

Just set the default panel size (defaultSize) to the same thing as the collapsed size?

[jsartisan]

Tried this:

const collapsedSize = (100 / parentSize) * 40;

  return (
    <ResizablePanel
      ref={ref}
      collapsible={true}
      minSize={10}
      collapsedSize={collapsedSize}
      defaultSize={props.collapsed ? collapsedSize : undefined}
      {...rest}
    >
      {content}
    </ResizablePanel>
  );

but does not work. When running the above code, the resizing stops working for that group and the size defaults to 50%

[jsartisan]

Let me try again. Most likely i might be messing up some prop. I'll get back.

[jsartisan]

@bvaughn can we define collapsed size in pixels? i remember it was possible around 0.63 version.

My usecase is that i want the collapsed height or width to be 40px.

[jsartisan]

Ok found a way to do it. By using flex-basis to whatever value i want and using collapsedSize and defaultSize as 0

<ResizablePanel
      ref={ref}
      collapsible={true}
      minSize={15}
      defaultSize={props.defaultCollapsed ? 0 : undefined}
      collapsedSize={0}
      className="!basis-10"
      {...rest}
    >
      {content}
 </ResizablePanel>