Drawer

A drawer is a panel that slides in from the left side of the screen.

#Default

Use a drawer for a task that needs room but should not take the whole page.

import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, IconButton } from '@wolf-rayet/react';

<Button onClick={() => setOpen(true)}>Open drawer</Button>
<Drawer isOpen={open} onClose={() => setOpen(false)} label="Conversation history">
  <DrawerHeader>
    <IconButton icon={<Back />} label="Close drawer" appearance="subtle" onClick={() => setOpen(false)} />
    <DrawerTitle>Conversation history</DrawerTitle>
  </DrawerHeader>
  <DrawerBody>
    <p>Every message in this conversation, oldest first.</p>
    <p>The bot answered twice before the conversation moved to the human queue.</p>
  </DrawerBody>
</Drawer>

#Widths

Use a wider drawer when the content is a table or a side by side comparison.

import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, IconButton } from '@wolf-rayet/react';

<Button onClick={() => setWide(true)}>Open wide drawer</Button>
<Drawer isOpen={wide} onClose={() => setWide(false)} width="wide" label="Queue settings">
  <DrawerHeader>
    <IconButton icon={<Back />} label="Close drawer" appearance="subtle" onClick={() => setWide(false)} />
    <DrawerTitle>Queue settings</DrawerTitle>
  </DrawerHeader>
  <DrawerBody>
    <p>Routing rules, business hours and escalation paths for this queue.</p>
  </DrawerBody>
</Drawer>