Светлая навигационная панель интернет-магазина. При наведении на пункт меню под ней плавно раскрывается шторка с тремя колонками ссылок, которые появляются каскадом сверху вниз, а страница под панелью мягко размывается.
У крупных ссылок первой колонки при наведении выезжает стрелка. Уход курсора со шторки закрывает её. На узких экранах вместо пунктов — кнопка меню, открывающая полноэкранный список.
Скопируйте эти файлы в components/store-navbar/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { StoreNavbar } from "@/components/store-navbar/store-navbar";
export function Header() {
return (
<div className="relative h-[720px]" style={{ containerType: "size" }}>
<StoreNavbar openDuration={0.4} stagger={0.05} />
</div>
);
}background?Цвет панели и шторки
Тип string·По умолчанию белый
textColor?Цвет текста панели
Тип string
maxWidth?Максимальная ширина содержимого в пикселях
Тип number·По умолчанию 1024
openDuration?Длительность раскрытия шторки в секундах
Тип number·По умолчанию 0.5
stagger?Задержка между появлением ссылок в секундах
Тип number·По умолчанию 0.06
blurPage?Размывать страницу под открытой шторкой
Тип boolean·По умолчанию true
mobileStagger?Задержка между пунктами мобильного меню в секундах
Тип number·По умолчанию 0.05