Drawer Component

[kaushalyap]

Feature request

Overview

Drawer component which opens panel from edge of window when clicked on the menu button.

Examples in other libraries

https://mui.com/components/drawers/

Who does this impact? Who is this for?

Beginners and anyone want to save time.

Additional context

Similar to sheet here

[jjenzz]

I believe this is just a Dialog that is positioned at the side of the screen with CSS.

@benoitgrelard @andy-hook I wonder if it is worth us adding a Drawer / Sheet component though that just re-composes Dialog to make things more explicit for people.

It seems to fit our ethos of providing components for common patterns rather than low level things that consumers are expected to compose themselves into their use-cases. Also, if we ever discover that role=dialog is not the correct pattern for this (I see MUI don't use that role), we can reflect that knowledge in a new release for them without changes to their implementation.

[benoitgrelard]

@colmtuite probably also has an opinion here too seeing as he created one in our design system: https://github.com/radix-ui/design-system/blob/master/components/Sheet.tsx.

I think I tend to agree with @jjenzz regarding our ethos.

[413n]

Any update? 😊

[colmtuite]

Hey @afnar. A dedicated Sheet component is not on the roadmap for the foreseeable future. Our recommendation is to use a non-modal Dialog as the underlying primitive, and build your Sheet with it, as we have done in our DS linked above.

[413n]

Hey @colmtuite. I was thinking now about the mobile support for the Drawer implemented with a Dialog and would be cool to have a swipeable feature (for reference I see MUI does it: https://mui.com/components/drawers/#swipeable). Would this be something Radix would do or it would be on charge of the consumer (us developers)?

[psirenny]

I was thinking now about the mobile support for the Drawer implemented with a Dialog and would be cool to have a swipeable feature (for reference I see MUI does it: https://mui.com/components/drawers/#swipeable).

Yea, it's the swipeable interaction with Drawers and Sheets that make implementing those components non-trivial.

[pinkboid]

Any update on this? I do not want to implement this component myself, and I'd like to use Radix for my UI library...

[eastack]

Any update?

[thuuupx]

I'm looking for it too 🧐

[thuuupx]

I'm looking for it too 🧐

Guys, I just found in this library: https://ui.shadcn.com/docs/components/sheet

[mohamedamara1]

I'm looking for it too 🧐

Guys, I just found in this library: https://ui.shadcn.com/docs/components/sheet

Drawer has been added too in the library : https://ui.shadcn.com/docs/components/drawer

[jordan-sussman]

If you're looking to still leverage Radix, here's a drawer component built with Radix's Dialog primitive - https://github.com/jordan-sussman/open-sesame

[subhranshudas]

Guys/Gals,

Following is my setup

• Next JS - 14
• UI lib - https://ui.shadcn.com/docs/components/drawer (from vaul)

I have a responsive navbar, on desktop sizes show the navlinks in the middle, and on smaller/mobile sizes show them on the drawer when clicked on the hamburger menu icon.

Now my navlinks when clicked takes the user to a fragment on the same page. ( with #fragmentID)

The issue I am facing is In the Mobile Nav Drawer, I am wrapping the with DrawerClose to trigger a close. When i click on a link the Drawer closes but the hyperlink section is not getting scrolled to.

I feel the hyperlink click event is somehow getting hijacked by Vaul Drawer. This issue doesn't happen in https://ui.shadcn.com/docs/components/sheet

Any help is appreciated!

Regards.

[anarkrypto]

MUI drawer has a Persistent Drawer which sits on the same surface elevation as the content and forces other content to change size and adapt to the viewport.

Screencast from 17-04-2024 11:48:03.webm

[rafaelsinosak]

any updates?