Drawer

Drawer slides a panel in from the side of the screen, over a scrim. Open it, then press Escape, click the scrim, or press Close:

Open navigation

DrawerDemo.tsx

import { Heading } from '@hozo/core'
import { Button, Drawer } from '@hozo/ui'
import { useState } from 'react'

export function DrawerDemo() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button tone="neutral" onPress={() => setOpen(true)}>
        Open navigation
      </Button>
      <Drawer open={open} onClose={() => setOpen(false)} accessibilityLabel="Navigation">
        <Heading level={3} className="text-lg font-bold text-hozo-text">
          Navigation
        </Heading>
        <Button tone="quiet" size="sm" href="#overview">
          Overview
        </Button>
        <Button tone="quiet" size="sm" href="#reports">
          Reports
        </Button>
        <Button tone="quiet" size="sm" href="#settings">
          Settings
        </Button>
        <Button tone="neutral" size="sm" onPress={() => setOpen(false)}>
          Close
        </Button>
      </Drawer>
    </>
  )
}

• open drives it, and onClose is called when it asks to go away: Escape or the scrim. Keep open in your state, as with Dialog.
• It is modal. Focus stays inside while it is open, the page behind it stops scrolling, and focus goes back to the opener when it closes.
• side is left by default. start and end follow the reading direction, so start is the right-hand side in a right-to-left interface.
• accessibilityLabel names it, or accessibilityLabelledBy points at a heading inside it.
• There is no close button, for the reason Dialog has none: put one in the children, as the example does.
• On React Native it is drawn over a Modal, and a swipe toward the edge closes it.