Как сделать сайдбар на сайте в 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), чтобы он выглядел лучше.

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

Шаг 5. Сделайте сайдбар «липким»

Чтобы сайдбар оставался на экране при скролле:

Выберите Sidebar и установите позиционирование: липкое.

Задайте отступ сверху 0.

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

Шаг 6. Настройте основной контент

По умолчанию у контейнеров есть ограничение ширины, которое мешает на больших экранах.

Что нужно сделать:

Уберите максимальную ширину у контейнера Main Flow — задайте значение none.

Если появляется горизонтальный скролл:

или установите Переполнение: hidden

Это исправляет отображение на опубликованной версии сайта.

Шаг 7. Настройте адаптив

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

Переключитесь на базовый брейкпоинт.

У Main Flow: уберите максимальную ширину.

У Sidebar:

У Section: задайте авто-лейаут и вертикальное направление

Дополнительно

Если сайдбар используется как меню:

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

установите z-index 100, чтобы он был выше других элементов

добавьте фон

Шаг 9. Проверьте результат

Обязательно проверьте:

поведение на широком экране — сайдбар должен быть закреплен

отсутствие горизонтального скролла

корректное отображение на планшете и мобильных

Итог

Сайдбар в Taptop строится через правильную структуру и работу с авто-лейаутами:

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

отдельный брейкпоинт для широких экранов

сетка с фиксированной колонкой под сайдбар

липкое позиционирование

адаптация в верхнее меню на мобильных

Такой подход позволяет не только улучшить навигацию, но и эффективно использовать пространство экрана.