Как сделать сайдбар на сайте в Taptop

Сайдбар — это дополнительная колонка слева или справа от основного контента. Чаще всего его используют на широких экранах, чтобы не растягивать текст на всю ширину и задействовать свободное пространство. В сайдбар можно вынести навигацию, ссылки на статьи, меню или другие вспомогательные элементы.

Разберем, как собрать сайдбар в Taptop: от структуры до адаптации под разные устройства.

Смотрите видео:

Когда использовать сайдбар

Сайдбар имеет смысл в двух основных сценариях:

страницы с текстовым контентом (например, блог или статьи)

десктопное меню, которое должно оставаться на экране при прокрутке

Важно учитывать, что сайдбар — это десктопное решение. На планшетах и мобильных устройствах его обычно перестраивают в обычный блок сверху.

Шаг 1. Настройте брейкпоинт

Сайдбар нужен только на широких экранах, поэтому сначала нужно добавить отдельный брейкпоинт — на нем будет отображаться сайдбар. На меньших разрешениях он будет превращаться в обычное меню сверху.

Откройте на верхней панели меню брейкпоинтов и нажмите «Добавить большие брейкпоинты». Далее добавьте новый брейкпоинт — например, «1280px и выше».

Переключитесь на разрешение 1280px на верхней панели.

Шаг 2. Соберите базовую структуру

Сайдбар всегда строится через разделение контента на две части, поэтому нужно сделать соответствующую структуру.

Добавьте новую секцию (Section).

Внутри секции создайте два контейнера:

Перенесите весь основной контент страницы в контейнер Main Flow. Удобнее это делать, последовательно перенося все секции от нижней к верхней.

Элементы, которые должны быть в сайдбаре (например, шапку), перенесите в контейнер Sidebar.

Шаг 3. Настройте лейаут

Теперь нужно расположить контейнеры рядом.

Выберите Section.

Настройте авто-лейаут:

Нажмите кнопку Редактировать сетку в авто-лейауте и установите ширину колонок:

Теперь слева будет сайдбар, справа — основной контент. 

Если шапка не перестроилась, проверьте ее позиционирование —  скорее всего задано фиксированное. Нужно изменить его на статическое.

Шаг 4. Настройте сайдбар

Структура сайдбара

Теперь нужно избавиться от лишних оберток.

Перенесите Container из шапки в Section.

Удалите Sidebar.

Переименуйте Container в Sidebar.

Структура осталась такая же, но теперь нет лишних оберток.

Фон и размер

Для наглядности задайте сайдбару какой-нибудь фон.

Задайте сайдбару размеры, чтобы он выглядел корректно:

задайте высоту: 100vh

или используйте 96vh + внешние отступы сверху и снизу по 2vh

Это позволит сайдбару занимать всю высоту экрана.

Направление контента

В сайдбаре (Sidebar) и внутри меню (Menu → Menu Lvl1) в авто-лейауте поменяйте направление на вертикальное (сверху вниз).

В Sidebar в авто-лейауте настройте:

3. Задайте сайдбару скругление (например, 20px), чтобы он выглядел лучше.

Теперь сайдбар располагается там, где нужно, и хорошо смотрится.