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 { useSession } from 'startupjs'
import { Sandbox } from '@startupjs/docs'

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

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

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

## Пример

```jsx example
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>
)
```

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

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

```jsx example
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
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>
)
```

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

Указание свойства `forceClosed` будет держать сайдбар закрытым и он не будет реагировать на свойство `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>
      )}
      forceClosed
    >
      <Content
        padding
        width='full'
        style={{ backgroundColor: 'white' }}
      >
        <Row>
          <Button onPress={() => $open.set(!open)}>Toggle</Button>
        </Row>
      </Content>
    </SmartSidebar>
  </Div>
)
```

## Sandbox

<Sandbox Component={SmartSidebar} />