Дизайн в БАРС Груп

Определение

Sidebar (Боковое меню) — это компонент пользовательского интерфейса, который представляет собой боковую панель на экране. Он используется для отображения навигационных элементов или пунктов меню, не отвлекая от основной части страницы.

Функциональность

Sidebar часто используется для основной или дополнительной навигации по сайту или системе. В нем могут размещаться ссылки на разделы, страницы, категории или функции.

Помогает структурировать информацию, позволяя разместить важные элементы управления или данные сбоку, чтобы пользователи могли легко переключаться между разделами без необходимости покидать текущую страницу.

Для экономии пространства Sidebar может сворачиваться в узкую панель, показывая только иконки.

Если основной раздел меню имеет вложенность, при нажатии на него открывается второй уровень меню, называемый Submenu. Этот дополнительный уровень позволяет пользователю увидеть и выбрать более детализированные или связанные элементы навигации.

Дизайн и Стиль

Размер и Тип

Sidebar бывает двух типов:

Тип Default — имеет 2 основных размера M и L, которые выбираются в зависимости от контекста использования. По ширине имеет размеры:

Размер M:

В закрытом состоянии – 48px
В открытом состоянии — 320px

Размер L:

В закрытом состоянии – 64px
В открытом состоянии — 320px

По высоте под разные размеры экрана, сохраняя важные элементы видимыми.
Это делает компонент гибким и удобным для использования на разных платформах.

Тип Advanced — по умолчанию скрыт и появляется только при наведении на левый край экрана. Для его фиксации пользователь может нажать на кнопку разворачивания, чтобы закрепить панель в раскрытом виде для постоянного отображения.

Имеет 2 основных размера M и L, которые выбираются в зависимости от контекста использования. По ширине имеет одинаковые размеры: 240 px

Высота зависит от количества разделов, находящихся внутри него. Она автоматически подстраивается, чтобы вместить все пункты меню, сохраняя удобство навигации для пользователя.

Для построения разделов используется компонент Раздел меню (Sidebar & Submenu item), который вставляется в соответствующий Слот (Slot)

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Варианты и параметры

Тип Default

Если компонент Sidebar всегда отображается в развернутом виде и не предусматривает возможность сворачивания, кнопку «Свернуть» можно убрать через параметр Collapse button?.