Drawer

npx npix@latest add Drawer

<>
  <Button onClick={()=>r(!e)}>
    Try me
  </Button>
  <Drawer
    backdrop
    handleClose={()=>r(!1)}
    placement="right"
  >
    <header>
      <DrawerTitle>
        John Smith
      </DrawerTitle>
      <DrawerDescription>
        jhon.smith@xyz.com
      </DrawerDescription>
    </header>
    <main className="my-4 border-t border-b border-border px-2 py-4 grow block">
      <div className="flex space-x-8 items-center hover:bg-accent-hover rounded-md p-2 hover:cursor-pointer">
        <EnvelopeIcon className="w-5 h-5" />
        <div className="col-span-5">
          Inbox
        </div>
      </div>
      <div className="flex space-x-8 items-center hover:bg-accent-hover rounded-md p-2 hover:cursor-pointer">
        <HeartIcon className="w-5 h-5" />
        <div className="col-span-5">
          Favorites
        </div>
      </div>
      <div className="flex space-x-8 items-center hover:bg-accent-hover rounded-md p-2 hover:cursor-pointer">
        <ExclamationCircleIcon className="w-5 h-5" />
        <div className="col-span-5">
          Spam
        </div>
      </div>
      <div className="flex space-x-8 items-center hover:bg-accent-hover rounded-md p-2 hover:cursor-pointer">
        <TrashIcon className="w-5 h-5" />
        <div className="col-span-5">
          Trash
        </div>
      </div>
      <div className="flex space-x-8 items-center hover:bg-accent-hover rounded-md p-2 hover:cursor-pointer">
        <Cog6ToothIcon className="w-5 h-5" />
        <div className="col-span-5">
          Settings
        </div>
      </div>
    </main>
    <footer>
      <Button type="danger">
        Report an issue
      </Button>
    </footer>
  </Drawer>
</>