Боже храни Cursor и ChatGPT, потому что благодаря им мне стало гораздо интереснее и понятнее как разбираться в React и современных CSS и JS. Читать и разбираться в этом, интереснее чем вслепую писать код.

Таббар — самый напичканный компонент, который я вообще когда-либо проектировал.

Так появился сначала <GlassEffect /> в нашем проекте. Код самого компонента в GitHub.

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

—

Таббар как многослойный пирог. У него два слоя с иконками и лейблами. Одна часть активна, другая неактивная. Но чтоб индикатор умел красиво менять свой цвет (не примитивным транзишеном) — используется clip-path, чьи координаты меняются, когда меняется таб.

—

Мой любимый хак: градиентный фон. Это не просто прямоугольник с градиентом — в нём есть дырка под размер таббара. Вся проблема в наслоении. Блюр иначе будет размывать цвета уже пропущенные через градиент, и весь эффект от размытия пропадёт.

Красота в том, что это — всего лишь SVG с вырезом. Которая умеет динамически менять свой размер.

—

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

На проект было затрачено:
— Непонятно сколько часов моего сна, потому что я безумный и мне было просто кайфово это ковырять.
— Десятки тысяч токенов в курсоре.
— Не могу подсчитать какое кол-во нервных клеток.
— Крепкая нервная система одного фронтендера.

На выходе получили:
— Навороченный таббар в вебе.