Collapsible Panels Like VSCode’s Sidebar 🎩 🪄

[chalecki]

Hey, Panel Wizards! 🧙‍♂️✨

First off—loving react-resizable-panels! I’m diving into it to build out a sidebar experience, and I’m aiming for that oh-so-smooth, VSCode-style mojo, where all sidebar panels can be collapsed into a one-by-one column - minimal, clean, and out-of-sight when you need a max workspace.

However, right now it seems like at least one panel insists on staying open. I’m wondering if there’s a way to get all panels to collapse when needed, or if this might need a little custom tinkering under the hood.

I’ve put together a little CodeSandbox for context: CodeSandbox.

I would love any thoughts, tricks, or secret spells you might have to make this happen! 🪄

Thanks a lot! 🚀

[bvaughn]

This library wasn't really written with the use case in mind of all panels being collapsed. If you wanted to implement that kind of UI, I would probably suggest that you listen for a panel to be collapsed, and then conditionally render it (rather, don't render it) until/unless the expand button is clicked again. This way, if all panels are collapsed, you'd end up rendering a panel group without any panels.

[chalecki]

Thanks for the answer. Yeah, I tried this approach but ended up with the error:

Previous layout not found for panel index -1

  20 | const isExpanded = ref.current.isExpanded();
  21 | 
  22 | if (isExpanded) {
> 23 |   ref.current.collapse();
     |              ^
  24 | } else {
  25 |   ref.current.expand();
  26 | }

I also tried to display an extra, empty panel at the bottom so it pushes the rest of the panels, but it also gets a bit of weird behavior. Nontheless, thanks for the answer.

I might need to create some dedicated solution and use react-resizable-panels for the main frame/layout 🤝