import SmartSidebar from '../SmartSidebar'
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 { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# SmartSidebar (умный сайдбар)

Умный сайдбар обычно используется для навигации. Он предоставляет удобный десктоп-мобильный интерфейс. Основываясь на фиксированной точке останова макета, он решает остаться в качестве [боковой панели](/docs/components/Sidebar) или превратиться в [выдвижную боковую панель](/docs/components/DrawerSidebar). По умолчанию он не виден на экране.

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

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

```jsx example
const [open, $open] = useSession('SimpleExampleSmartSidebar')

return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Span>SmartSidebar</Span>
      )}
    >
      <Button onPress={() => $open.set(!open)}>Toggle Sidebar</Button>
    </SmartSidebar>
  </Div>
)
```

## Фиксированная точка останова

Свойство `fixedLayoutBreakpoint` указывает точку останова ширины экрана, ниже которой [сайдбар](/docs/components/Sidebar) переключается на [дровер](/docs/components/DrawerSidebar). Тип `fixedLayoutBreakpoint` - число, со значением по умолчанию `1024`.

```jsx example noscroll
const [open, $open] = useSession('ExampleSmartSidebarFixedLayoutBreakpoint')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      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>
      )}
      fixedLayoutBreakpoint={10000}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</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>
    </SmartSidebar>
  </Div>
)
```

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

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

```jsx example noscroll
const [open, $open] = useSession('ExampleRightSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Div>
          <Br />
          <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>
        </Div>
      )}
      position={'right'}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button 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>
    </SmartSidebar>
  </Div>
)
```

## Видимость по умолчанию (только десктоп)

Для управления видимостью по умолчанию используйте свойство `defaultOpen`.

```jsx example
const [open, $open] = useSession('ExampleDefaultOpenSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Div>
          <Br />
          <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>
        </Div>
      )}
      defaultOpen
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Заблокированный умный сайдбар

Указание свойства `disabled` будет держать сайдбар закрытым и он не будет реагировать на свойство `open`.

```jsx example
const [open, $open] = useSession('ExampleLockerSmartSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Div>
          <Br />
          <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>
        </Div>
      )}
      disabled
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
      </Content>
    </SmartSidebar>
  </Div>
)
```

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

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

```jsx example
const [open, $open] = useSession('ExampleLazySmartSidebar')

return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      renderContent={() => (
        <Span>Lazy SmartSidebar</Span>
      )}
      lazy
    >
      <Button onPress={() => $open.set(!open)}>Toggle Sidebar</Button>
    </SmartSidebar>
  </Div>
)
```

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

```jsx example noscroll
const [open, $open] = useSession('ExampleSmartSidebar')
return (
  <Div style={{overflow: 'hidden'}}>
    <SmartSidebar
      $open={$open}
      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>
      )}
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</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>
    </SmartSidebar>
  </Div>
)
```

## Sandbox

<Sandbox Component={SmartSidebar}
  props={{
    $open: $root.scope('_session.Sandbox.SmartSidebar'),
    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.SmartSidebar')
            $root.scope('_session.Sandbox.SmartSidebar').set(!value)
          }}
        >Toggle</Button>
        <Br />
        <Span>Children content</Span>
      </Div>
    )
  }}
  rendererStyleName='renderer'
  block
/>