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

# Sidebar (сайдбар)

Сайдбар обычно используется для навигации. Изначально он не виден на экране.

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

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

```jsx example
const media = useMedia()
const [open, $open] = useSession('SimpleExampleSidebar')

return (
  <Sidebar
    $open={$open}
    width={media.tablet ? 264 : 120}
    renderContent={() => (
      <Span>
        Sidebar
      </Span>
    )}
  >
    <Button onPress={() => $open.set(!open)}>
      Toggle sidebar
    </Button>
  </Sidebar>
)
```

## Расположение

Свойство `position` указывает сторону окна, c которой будет отображаться сайдбар. Возможные значения свойства `position` - `left` (по умолчанию) и `right`.

```jsx example noscroll
const media = useMedia()
const [open, $open] = useSession('ExampleRightSidebar')

return (
  <Sidebar
    $open={$open}
    width={media.tablet ? 264 : 120}
    position='right'
    renderContent={() => (
      <Menu>
        <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-4</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-5</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-6</Menu.Item>
      </Menu>
    )}
  >
    <Content
      padding
      width='full'
      style={{
        backgroundColor: 'white'
      }}
    >
      <Row>
        <Button
          variant='flat'
          onPress={() => { $open.set(!open) }}
        >
          Toggle right sidebar
        </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>
  </Sidebar>
)
```

## Ленивый рендеринг

По умолчанию содержимое боковой панели не уничтожается при ее закрытии. Чтобы изменить это поведение, передайте `lazy=true`.

```jsx example
const media = useMedia()
const [open, $open] = useSession('ExampleLazySidebar')

return (
  <Sidebar
    $open={$open}
    width={media.tablet ? 264 : 120}
    renderContent={() => (
      <Span>
        Lazy sidebar
      </Span>
    )}
    lazy
  >
    <Button onPress={() => $open.set(!open)}>
      Toggle sidebar
    </Button>
  </Sidebar>
)
```

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

```jsx example noscroll
const media = useMedia()
const [open, $open] = useSession('ExampleSidebar')

return (
  <Sidebar
    $open={$open}
    width={media.tablet ? 264 : 120}
    renderContent={() => (
      <Menu>
        <Menu.Item onPress={() => null}>Nav-1</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-2</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-3</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-4</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-5</Menu.Item>
        <Menu.Item onPress={() => null}>Nav-6</Menu.Item>
      </Menu>
    )}
  >
    <Content
      padding
      width='full'
      style={{
        backgroundColor: 'white'
      }}
    >
      <Row>
        <Button variant='flat' onPress={() => $open.set(!open)}>
          Toggle sidebar
        </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>
  </Sidebar>
)
```

## Sandbox

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