Drawer in five frameworks

import { Drawer } from '@hamur/react/drawer'

export default function DrawerExample() {
  return (
    <Drawer.Root swipeDirection="right">
      <Drawer.Trigger className="button">
        Open drawer
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className="backdrop drawer-backdrop" />
        <Drawer.Viewport className="drawer-viewport">
          <Drawer.Popup className="drawer">
            <Drawer.Content>
              <Drawer.Title className="dialog-title">
                Filters
              </Drawer.Title>
              <Drawer.Description className="muted">
                Narrow the list down. Swipe right or press Esc to close.
              </Drawer.Description>
              <div className="actions">
                <Drawer.Close className="button">
                  Done
                </Drawer.Close>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  )
}