---
name: Drawer
menu: Components
route: /components/drawer
---

import { Playground, PropsTable } from 'docz'
import moment from 'moment'
import { Button, Drawer, Table, ArrowButton, CloseButton } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
import './drawer.scss';

# Drawer
A drawer is a modal panel that slides in from the side of the page. A drawer is generally used to provide navigation in mobile devices. For us, it is specially used for displaying content.

Drawer is very similar to Modals in construction, and provides the same level of keyboard support.

The user may dismiss the drawer by pressing Esc, or by swiping to the side with touch or the trackpad. You may also provide a UI element inside the drawer — e.g., a close box — that dismisses the drawer.

<PropsTable of={Drawer} />

## Examples

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            visible={state.visible}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >
            <Drawer.Header fixed>
              <div className="f-header">
                <div className="f-header-arrows">
                  <ArrowButton direction="up" />
                  <ArrowButton direction="down" />
                </div>
                <div className="f-header-details">
                  <img src="https://www.fillmurray.com/240/240" className="f-header-details-src" />
                  <h2 className="f-header-details-name">Fabius Pereira</h2>
                  <h4 className="f-header-details-role">Product Manager</h4>
                </div>
                <div className="f-header-close">
                  <CloseButton onClick={() => {
                    setState({ visible: false })
                  }} />
                </div>
              </div>
            </Drawer.Header>
            <Drawer.Body>
              <div>
                <div className="f-table-container">
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={5}>Personal data</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell maxWidth={300}>Attributes</Table.Cell>
                        <Table.Cell maxWidth={300}>Old value</Table.Cell>
                        <Table.Cell maxWidth={300}>New value</Table.Cell>
                        <Table.Cell maxWidth={300}>Valid from</Table.Cell>
                        <Table.Cell maxWidth={300}>Edited on</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell maxWidth={300} bold>IBAN</Table.Cell>
                        <Table.Cell maxWidth={300}>DE77 1201 0131 0678 4371 90</Table.Cell>
                        <Table.Cell maxWidth={300} bold theme="warning">DE01 1211 2421 2311 9312 09 DE01 1211 2421 2311 9312 09 DE01 1211 2421 2311 9312 09 DE01 1211 2421 2311 9312 09</Table.Cell>
                        <Table.Cell maxWidth={300}>01.05.18</Table.Cell>
                        <Table.Cell maxWidth={300}>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell maxWidth={300} bold>BIC</Table.Cell>
                        <Table.Cell maxWidth={300}>CO1345DE</Table.Cell>
                        <Table.Cell maxWidth={300} bold theme="warning">NX7821DE</Table.Cell>
                        <Table.Cell maxWidth={300}>01.05.18</Table.Cell>
                        <Table.Cell maxWidth={300}>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell maxWidth={300} bold>Tax ID</Table.Cell>
                        <Table.Cell maxWidth={300}>42 187 999 19</Table.Cell>
                        <Table.Cell maxWidth={300} bold theme="warning">(Deleted)</Table.Cell>
                        <Table.Cell maxWidth={300}>01.05.18</Table.Cell>
                        <Table.Cell maxWidth={300}>15.05.18</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div className="f-table-container">
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={5}>Salary data</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Type</Table.Cell>
                        <Table.Cell>Old value</Table.Cell>
                        <Table.Cell>New value</Table.Cell>
                        <Table.Cell>Valid from</Table.Cell>
                        <Table.Cell>Edited on</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Main Salary</Table.Cell>
                        <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
                        <Table.Cell bold theme="warning">3.400,00</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Bonus</Table.Cell>
                        <Table.Cell empty />
                        <Table.Cell bold theme="warning">500,00</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div>
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={4}>Absence Periods</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Absence type</Table.Cell>
                        <Table.Cell>Absence start</Table.Cell>
                        <Table.Cell>Absence end</Table.Cell>
                        <Table.Cell>Absence days in the period</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Paid vacation</Table.Cell>
                        <Table.Cell>15.05.2018</Table.Cell>
                        <Table.Cell>29.05.2018</Table.Cell>
                        <Table.Cell>1</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Sick days</Table.Cell>
                        <Table.Cell>02.05.2018</Table.Cell>
                        <Table.Cell>04.05.2018</Table.Cell>
                        <Table.Cell>03</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div>
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={4}>Absence Periods</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Absence type</Table.Cell>
                        <Table.Cell>Absence start</Table.Cell>
                        <Table.Cell>Absence end</Table.Cell>
                        <Table.Cell>Absence days in the period</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Paid vacation</Table.Cell>
                        <Table.Cell>15.05.2018</Table.Cell>
                        <Table.Cell>29.05.2018</Table.Cell>
                        <Table.Cell>1</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Sick days</Table.Cell>
                        <Table.Cell>02.05.2018</Table.Cell>
                        <Table.Cell>04.05.2018</Table.Cell>
                        <Table.Cell>03</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div>
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={4}>Absence Periods</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Absence type</Table.Cell>
                        <Table.Cell>Absence start</Table.Cell>
                        <Table.Cell>Absence end</Table.Cell>
                        <Table.Cell>Absence days in the period</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Paid vacation</Table.Cell>
                        <Table.Cell>15.05.2018</Table.Cell>
                        <Table.Cell>29.05.2018</Table.Cell>
                        <Table.Cell>1</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Sick days</Table.Cell>
                        <Table.Cell>02.05.2018</Table.Cell>
                        <Table.Cell>04.05.2018</Table.Cell>
                        <Table.Cell>03</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div>
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={4}>Absence Periods</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Absence type</Table.Cell>
                        <Table.Cell>Absence start</Table.Cell>
                        <Table.Cell>Absence end</Table.Cell>
                        <Table.Cell>Absence days in the period</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Paid vacation</Table.Cell>
                        <Table.Cell>15.05.2018</Table.Cell>
                        <Table.Cell>29.05.2018</Table.Cell>
                        <Table.Cell>1</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Sick days</Table.Cell>
                        <Table.Cell>02.05.2018</Table.Cell>
                        <Table.Cell>04.05.2018</Table.Cell>
                        <Table.Cell>03</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
              </div>
            </Drawer.Body>
          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>

# Preventing to close
By default, the Drawer component will always close as soon as the closing key (ESC by default) is pressed. However, this behavior can be easily changed by using the preventToClose property.

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            visible={state.visible}
            preventToClose
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >
            <Drawer.Header>
              <p>You cannot close me if you press on the ESC key :)</p>
              <Button theme="primary" onClick={() => {
                setState({ visible: false })
              }}>
                Close me
              </Button>
            </Drawer.Header>
          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>

# Changing the key to close
As we mentioned above, by default, the ESC key is used for close the Drawer (unless you set the preventToClose property of course). And how about changing the key? Of course you can do it :). Change use the closeKey property.
But remember! The closeKey maps to the event.which from the Input Event Handler. If you need more details to find, just take a look here: https://keycode.info/

Bellow, the Drawer will be closed just if you press in the Enter key.

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            closeKey="13"
            visible={state.visible}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >
            <Drawer.Header>
              <p>You cannot close me pressing ESC, but try pressing ENTER :)</p>
              <Button theme="primary" onClick={() => {
                setState({ visible: false })
              }}>
                Just close me
              </Button>
            </Drawer.Header>
          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>

# Defining a vertical / left offset
Drawer is fully customizable, so it makes sense that you can define a top / left offset in order to fit in every specific situation.

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            topOffset="50px"
            leftOffset="500px"
            visible={state.visible}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >
            <Drawer.Header>
              <p>As you can see, the offset from top and left are not different :)</p>
              <Button theme="primary" onClick={() => {
                setState({ visible: false })
              }}>
                Just close me
              </Button>
            </Drawer.Header>
          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>

# Events: OnOpen
This event will be fired after the state change from not visible to visible

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            visible={state.visible}
            onOpen={() => {
              console.log('on open')
            }}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >

          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>

# Events: onClose
This event will be fired after the state change from visible to not visible

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <Drawer
            visible={state.visible}
            onClose={() => {
              console.log('on close')
            }}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >

          </Drawer>
         </React.Fragment>
      )}
    </State>
  </div>
</Playground>


