Figsolve #1: Хитрый Sidebar
Встречайте новую серию — Figsolve. Здесь я буду разбирать, как в Фигме собрать по-настоящему странные, замысловатые и, казалось бы, невозможные компоненты. Открывает серию весьма непростой кейс — очень хитрый сайдбар.
Задача
Представим, что вы делаете обычное боковое меню. Всё как обычно — пункты идут сверху вниз. Но вот условия: первые элементы должны быть наверху, последние — всегда в самом низу. Если экран становится меньше, последние три пункта не просто опускаются вниз, а буквально перекрывают остальные. При этом поверх оставшихся появляется оверлей. А если среди этих пунктов нет активных — исчезают и дивайдеры. Звучит безумно? Определенно.
Заставляем работать
Сложность начинается сразу: в одном состоянии нижний блок должен вести себя как Fill, в другом — как Fixed. При этом всё должно адаптироваться, как ни в чём не бывало. Да, Фигма так не умеет. Но когда это нас останавливало?
Я начал с идеи разбить компонент на три секции. В верхнюю поместил один пункт, в среднюю — пользовательские, а в нижнюю — те самые три закреплённые. К нижнему блоку добавил фиксированный фон и отключил Clip content, чтобы фон мог перекрывать остальные элементы. Верхняя и средняя секции работают на Hug, нижняя — на Fill. На первый взгляд всё почти идеально, но нижний блок пока не ведёт себя как нужно.
Чтобы заставить его прибиваться к низу, я добавил между средней и нижней секцией невидимый спейсер. Этот спейсер — обычный контейнер Fill и минимальной высотой, скажем, 8 пикселей. Именно он «толкает» нижнюю часть вниз, если есть свободное место, но при нехватке — позволяет нижнему блоку подниматься и перекрывать остальные. Работает как надо, двигаемся дальше.
Появление оверлея
Теперь нам нужен оверлей, который появляется не всегда, а только когда нижняя панель начинает перекрывать содержимое. В одной из прошлых статей, Figsight #12, я уже рассказывал, как это можно сделать. Здесь же используется трюк попроще — тот самый, что мы проходили в Figsight #4.
Всё работает благодаря хитрому дополнительному Fill-слою в нижнем фоне. Когда он упирается в ограничение по размеру, он сжимается до 1 пикселя. А меньше Фигма всё равно не даёт. Этот пиксель — наш триггер. Если контейнер стал совсем тонким — это значит, что места не осталось. И вот тут можно запускать оверлей, благо мы уже умеем его показывать при этом условии.
Посмотреть, как всё устроено, можно в файле с компонентом — так проще всего разобраться в деталях.
Логика дивайдеров
Последний штрих — это умные дивайдеры. Их нужно показывать только тогда, когда хотя бы один из пользовательских пунктов не выключен. То есть, нужна логика — простая операция OR. Мы с этим уже работали в сериях Figsight #7 и #8. Правда, в примерах были показаны конструкции на два входа. В этом случае я доработал схему, чтобы она могла обрабатывать несколько. Это легко: для OR просто нужно добавить ещё один вход к остальным.
Теперь у нас есть логический блок, который выдаёт отступ, равный нулю, если все пункты выключены. Внутри этого отступа прячется дивайдер с абсолютным позиционированием. Clip content включён, ничего лишнего не видно.
Настраиваем отступы, шлифуем поведение на краевых кейсах, и компонент готов.
Получился универсальный, адаптивный и чертовски умный сайдбар. Он сам переключает поведение блоков, реагирует на нехватку места, показывает оверлей в нужный момент и скрывает дивайдеры, если они не нужны. И при всём этом — всего 280 слоёв.
Надеюсь, новый формат практических статей Figsolve придётся вам по вкусу. А Figsight с его философией и трюками никуда не исчезает — он продолжит выходить, как и раньше.