Implement navigation/side drawer component

[joelzwarrington]

There are many cases where we'd need to display a drawer like component similar to ones present in Atlantis:

Could we implement something like this:

Prop	Type	Required
activator (Similar to menu component)	React Component	true
direction	"left", "right", "top", "bottom"	true
children	React Children	true
open	boolean	false
onDismissRequest	(): void	false
onOpenRequest	(): void	false

const [isOpen, setIsOpen] = useState(false);

return (
  <SideDrawer activator={<Button />} direction="left" open={isOpen} onOpenRequest={handleOpen} onDismissRequest={handleDismiss}>
    <h1>I am content inside the drawer</h1>
  <SideDrawer />
)

function handleOpen() {
  setIsOpen(true);
}

function handleDismiss() {
  setIsOpen(false);
}

on dismiss request would trigger when:

• dismiss button clicked
• drawer swiped away
• clicked on area outside of dismiss button
• escape key is pressed

The drawer would overlap content and be placed on-top and would slide in based on the direction.

Also would be good to have accessibility considered.

When on a mobile like/sized device, the drawer could take the entire page?

[joelzwarrington]

@chris-at-jobber any thoughts on this?