```js
import { Drawer } from '@yandex-lego/components/Drawer/touch-phone/bundle';
```

## Базовый вариант
```js
const App = () => {
  const scopeRef = React.useRef<HTMLDivElement>(null)
  const [visible, setVisible] = React.useState(false)
  const openDrawer = React.useCallback(() => setVisible(true), [setVisible])
  const closeDrawer = React.useCallback(() => setVisible(false), [setVisible])

  return (
    <div ref={scopeRef}>
      <button onClick={openDrawer}>Открыть шторку</button>
      <Drawer visible={visible} onClose={closeDrawer} scope={scopeRef} view="default">
        <p>Содержимое шторки</p>
        <button onClick={closeDrawer}>Закрыть шторку</button>
      </Drawer>
    </div>
  )
}
```

### Props

<!-- props:start -->
| Свойство        | Тип                                                                                                                                                                                                                                                               | По умолчанию    | Описание                                                                                                                                 |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| onClose?        | `() => void`                                                                                                                                                                                                                                                      | —               | Функция, которая будет вызвана при попытке закрытия шторки.                                                                              |
| titleComponent? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | —               | Компонент шапки шторки.                                                                                                                  |
| dragDisabled?   | `false \| true`                                                                                                                                                                                                                                                   | —               | Делает шторку "статичной"                                                                                                                |
| nested?         | `false \| true`                                                                                                                                                                                                                                                   | —               | Меняет внешний вид для режима "шторка внутри шторки".                                                                                    |
| direction?      | `"bottom" \| "left" \| "right"`                                                                                                                                                                                                                                   | —               | Направление, откуда появляется шторка.                                                                                                   |
| maxSize?        | `string`                                                                                                                                                                                                                                                          | —               | Максимальный размер шторки (ширина или высота в зависимости от direction). Принимает любое валидное CSS значение.                        |
| animation       | `IDrawerAnimationParams`                                                                                                                                                                                                                                          | —               | Параметры анимации шторки.                                                                                                               |
| keepMounted?    | `false \| true`                                                                                                                                                                                                                                                   | `true`          | Сохраняет контейнер в DOM после создания                                                                                                 |
| className?      | `string`                                                                                                                                                                                                                                                          | —               | Дополнительный класс                                                                                                                     |
| innerRef?       | `(instance: HTMLDivElement) => void \| RefObject<HTMLDivElement>`                                                                                                                                                                                                 | —               | Ссылка на корневой DOM-элемент компонента                                                                                                |
| zIndex?         | `number`                                                                                                                                                                                                                                                          | —               | Задает слой `z-index`                                                                                                                    |
| visible?        | `false \| true`                                                                                                                                                                                                                                                   | —               | Делает попап видимым                                                                                                                     |
| scope?          | `RefObject<HTMLElement>`                                                                                                                                                                                                                                          | `document.body` | Ссылка на DOM-элемент, в котором размещается попап. Важно, чтобы контейнер имел `position: relative` для корректного позиционирования. |
<!-- props:end -->