Компактная панель из иконок: при нажатии выбранная вкладка раздвигается и показывает подпись, а сама панель на пружине растягивается вверх и в ширину, открывая содержимое раздела.
При переходе на соседнюю вкладку содержимое уезжает в сторону, противоположную движению, а новое въезжает с другой стороны, пока высота плавно подстраивается под него. Повторное нажатие или клик мимо панели сворачивает её обратно.
Скопируйте эти файлы в components/expandable-tabs/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { Bell, House } from "lucide-react";
import { ExpandableTabs } from "@/components/expandable-tabs/expandable-tabs";
const TABS = [
{ title: "Главная", icon: House, content: <div className="p-2">Главная</div> },
{ title: "Входящие", icon: Bell, content: <div className="p-2">Нет новых уведомлений</div> },
];
export function Toolbar() {
return <ExpandableTabs tabs={TABS} expandedWidth={300} radius={20} />;
}tabsВкладки: название, иконка и содержимое
Тип ExpandableTab[]
collapsedWidth?Ширина свёрнутой панели в пикселях
Тип number·По умолчанию 200
collapsedHeight?Высота свёрнутой панели в пикселях
Тип number·По умолчанию 50
expandedWidth?Ширина раскрытой панели в пикселях
Тип number·По умолчанию 290
radius?Скругление панели в пикселях
Тип number·По умолчанию 24
duration?Длительность пружины в секундах
Тип number·По умолчанию 0.5
defaultSelected?Вкладка, открытая при загрузке
Тип number | null·По умолчанию null
className?Классы корневого блока
Тип string