import Br from '../Br'
import Button from '../Button'
import Content from '../Content'
import Div from '../Div'
import DrawerSidebar from '../DrawerSidebar'
import Menu from '../Menu'
import Row from '../Row'
import Span from '../typography/Span'
import { $root, useSession } from 'startupjs'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# DrawerSidebar

Drawer is typically used for nagivation. It initially not visible on the screen, but it can be pulled in from the edge of the window.

```jsx
import { DrawerSidebar } from '@startupjs/ui'
```

## Simple example

```jsx example
const [open, $open] = useSession('SimpleExampleDrawerSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <DrawerSidebar
      $open={$open}
      renderContent={() => (
        <Span>
          DrawerSidebar
        </Span>)
      }
    >
      <Button onPress={() => $open.set(true)}>Open</Button>
    </DrawerSidebar>
  </Div>
)
```

## Position

The `position` property specifies the side of the window from which the drawer will slide in. Possible values of `position` property are `left` (default) and `right`.

```jsx example noscroll
const [open, $open] = useSession('ExampleRightDrawerSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <DrawerSidebar
      $open={$open}
      position='right'
      renderContent={() => (
        <Menu>
          <Menu.Item>Nav-1</Menu.Item>
          <Menu.Item>Nav-2</Menu.Item>
          <Menu.Item>Nav-3</Menu.Item>
          <Menu.Item>Nav-4</Menu.Item>
        </Menu>
      )}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(true)}>Open</Button>
        </Row>
        <Br />
        <Span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
        </Span>
      </Content>
    </DrawerSidebar>
  </Div>
)
```

## Lazy rendering

By default the drawer content are not destroyed when it is closed. To change this behavior pass `lazy=true`.

```jsx example
const [open, $open] = useSession('ExampleLazyDrawerSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <DrawerSidebar
      $open={$open}
      renderContent={() => (
        <Span>
          Lazy DrawerSidebar
        </Span>)
      }
      lazy
    >
      <Button onPress={() => $open.set(true)}>Open</Button>
    </DrawerSidebar>
  </Div>
)
```

## Complex example

```jsx example noscroll
const [open, $open] = useSession('ExampleDrawerSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <DrawerSidebar
      $open={$open}
      renderContent={() => (
        <Menu>
          <Menu.Item>Nav-1</Menu.Item>
          <Menu.Item>Nav-2</Menu.Item>
          <Menu.Item>Nav-3</Menu.Item>
          <Menu.Item>Nav-4</Menu.Item>
        </Menu>
      )}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(true)}>Open</Button>
        </Row>
        <Br />
        <Span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
        </Span>
      </Content>
    </DrawerSidebar>
  </Div>
)
```

## Sandbox

<Sandbox
  Component={DrawerSidebar}
  props={{
    $open: $root.scope('_session.Sandbox.DrawerSidebar'),
    renderContent: () => (
      <Div styleName='sidebar'>
        <Span>Sidebar content</Span>
      </Div>
    ),
    children: (
      <Div styleName='content'>
        <Button
          onPress={()=> {
            const value = $root.get('_session.Sandbox.DrawerSidebar')
            $root.scope('_session.Sandbox.DrawerSidebar').set(!value)
          }}
        >Open</Button>
        <Br />
        <Span>Children content</Span>
      </Div>
    )
  }}
  rendererStyleName='renderer'
  block
/>