How to create collapsible Side nav bar?

[rahul3103]

I need help in creating collapsible side navbar with radix components.
https://mui.com/material-ui/react-drawer/#mini-variant-drawer
Something like this but when dialog opens it should push the other components towards right instead of opening on top. Right now I can't achieve with dialog as it's coming on top and on the whole page. I want to implement side nav bar inside a div.

[benoitgrelard]

The underlying primitive can be Dialog, if you don't want it to be its own layer on top of the app, you don't have to use the Portal part. This way the content will render inline in the DOM where you expect, you can then style things as you want.

[rahul3103]

https://codesandbox.io/p/devbox/navbar-2jfmm4?file=%2Fapp%2Fpage.tsx%3A33%2C14-33%2C24
@benoitgrelard I have created a collapsible side nav but animation is totally broken. I want the red div to also animate but currently I am not able to achieve the same.

[benoitgrelard]

Unfortunately, this isn't anything to do with the primitive, but rather just some CSS. We can't offer too much help with CSS, otherwise we would never have enough time.

[rahul3103]

Yeah, thanks a lot for the quick replies.

[SalahAdDin]

https://codesandbox.io/p/devbox/navbar-2jfmm4?file=%2Fapp%2Fpage.tsx%3A33%2C14-33%2C24 @benoitgrelard I have created a collapsible side nav but animation is totally broken. I want the red div to also animate but currently I am not able to achieve the same.

where is the collapsible menu?

[0xdevalias]

This is something that can be covered with Dialog and/or NavigationMenu.

Originally posted by @benoitgrelard in #2664 (comment)

You can use this to make a sidebar:

• Dialog Portal with custom container
• Dialog Content with modal=false
  • onInteractOutside={e => e.preventDefault()}
  • onPointerDownOutside={e => e.preventDefault()}

Originally posted by @BrianHung in #2664 (comment)