---
name: Sidebar
---

import {Playground, PropsTable} from 'docz'
import {css} from '@emotion/core'

import Sidebar from '.'
import Portal from '../Portal'
import Button from '../Button'
import Base from '../Base'

import {PosedSidebar} from './example'

# Sidebar

```js
import posed from 'react-pose'

const PosedSidebar = posed(Sidebar)({
  open: {x: '0%'},
  closed: {x: '-100%'}
})
```

<Playground>
  <Sidebar.State>
    {sidebar => {
      return (
        <>
          <Button onClick={sidebar.toggle}>Toggle Sidebar: {sidebar.visible ? 'Visible' : 'Hidden'}</Button>
          <PosedSidebar use={Portal} pose={sidebar.visible ? 'open' : 'closed'} css={css(`z-index: 99999 !important;`)}>I am Sidebar</PosedSidebar>
        </>
      )
    }}
  </Sidebar.State>
</Playground>
