How do I start panel as collapsed?

[nmoagit]

Hi, I am trying to figure out how to load a panel with it's default state as collapsed while it still has minSize for collapsible. I have tried setting the defaultSize = {0} to start but I get the warning default size should not be less than min size.

Not that it is just a warning about invalid configuration; it actually does what I want but it seems that I am doing something wrong.

Thanks

[bvaughn]

So far as I know, that should work. The warning sounds like it's firing incorrectly. I'd welcome a PR that adds a unit test and fixes it :)

[nmoagit]

I would, but a lot of this stuff is way above my head. I am still learning (⁄ ⁄•⁄ω⁄•⁄ ⁄)

[NjengaFelix]

Hello @bvaughn A follow up on this question. How would you start a panel as collapsed on small screen sizes and on larger screens as a specific size. More to this, can one use tailwind responsive classes directly to achieve this

[bvaughn]

@NjengaFelix You would set defaultSize to
0 conditionally, based on the viewport size:

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

There is nothing really specific to this library in that scenario.

I wouldn’t think Tailwind would need do be involved in any way.

[NjengaFelix]

@bvaughn Thank you. I've set the default and minsize to 0.

Then via className using Tailwindcss responsive classes set the min-width for my Panel to 300px for screen larger than 640px.
On mobile phones my menu panel shall start with the defaults of 0 while on desktop a min width of 300px

# this example is purely using ui.shadcn.com ResizablePanel components
const AppMenuResizablePanel = ({ children }: { children: React.ReactNode }) => (
  <ResizablePanel
    defaultSize={0}
    minSize={0}
    maxSize={50}
    className="sm:min-w-[300px]"
  >
    <section className="flex flex-col">{children}</section>
  </ResizablePanel>
);