Сайдбар

Используется

Для предоставление дополнительной информации пользователю, не прерывая основной сценарий

Не используется

Когда нужно прервать действие пользователя для получения подтверждения выполнения действия или сценария, для этого используйте Modal.

Строение компонента

1. Заголовок
2. Кнопка закрытия
3. Слот тулбара
4. Слот контента
5. Слот футера

Заголовок

Заголовок является обязательным элементом и используется как краткое описание контента или отражает суть действия, которое его запустило

Кнопка закрытия

Закрывает сайдбар с потерей всей введенной информации, если она не сохранена. Является обязательным элементом.

Слот тулбара

Может содержать любые элементы взаимодействия с контентом, например кнопки, фильтры и тд.

Слот контента

Может содержать любой контент.

Слот футера

Может содержать любые элементы взаимодействия с контентом, например кнопки, фильтры и тд.

Встроенные компоненты

Icon button

Цвета

Размеры

Типографика

Поведение

Адаптивность

В мобильной версии сайдбары всех размеров занимают 100% ширины экрана, если в слоте контента использовалась информация, которая не влезает в экран, появится нативный горизонтальный скролл.

Sidebar S

Breakpoint (px)	Ширина Sidebar (px)
Extra-small (320)	320
Small (672)	320
Medium (1056)	320
Large (1312)	320
Extra-large (1584)	320

Sidebar M

Breakpoint (px)	Ширина Sidebar (px)
Extra-small (320)	320
Small (672)	480
Medium (1056)	480
Large (1312)	480
Extra-large (1584)	480

Sidebar L

Breakpoint (px)	Ширина Sidebar (px)
Extra-small (320)	320
Small (672)	672
Medium (1056)	640
Large (1312)	640
Extra-large (1584)	640

Sidebar 3XL

Breakpoint (px)	Ширина Sidebar (px)
Extra-small (320)	320
Small (672)	672
Medium (1056)	1056
Large (1312)	1120
Extra-large (1584)	1120