I hope drawer can follow dialog pattern so I can close drawer by ESC

[wenerme]

Drawer just like diloag, this is how https://github.com/emilkowalski/vaul designed.

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ├── // navbar
  │    ├── // content
  │    ╰── // footer
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       ╰── // Sidebar content (menu or anything)

import { Drawer } from 'vaul';

function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <p>Content</p>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

[saadeghi]

I'm not sure if we use <dialog> element, it will be possible to permanently show the sidebar on larger screens.
Currently drawer can be closed on mobile and can be visible on desktop, regardless of a trigger.
How would it be possible to do with <dialog> element?

Note: currently you can write a line if JS to uncheck the checkbox whenever esc key is pressed.

[wenerme]

Drawer feels like a special popover/dialog to me, so I expected the esc behavior. currently close by manual listen key event, ok with this, just a thought.

[saadeghi]

Yeah I understand.
daisyUI'e drawer has the ability to occasionally be a dialog/popover/off-canvas and at the same time it can work as a normal (always visible) sidebar. It's a more advanced than a simple dialog that can open and close.

I will research more about this and I will consider it if I find a way.