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 (дровер)

Дровер обычно используется для навигации. Изначально он не виден на экране, но может быть вытянут c края окна.

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

## Простой пример

```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` указывает сторону окна, с которой будет выдвигаться дровер. Возможные значения свойства `position` - `left` (по умолчанию) и `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)}>Открыть</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=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>
)
```

## Сложный пример

```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)}>Открыть</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
/>