Верхняя часть панели управления: логотип, хлебные крошки с командой, тарифом и проектом, а под ними строка вкладок. Активную вкладку подчёркивает линия, которая плавно перетекает к выбранному пункту, а под курсором появляется мягкая подсветка.
При прокрутке крошки уходят вверх, строка вкладок прилипает к краю экрана и немного сдвигается вправо, освобождая место для логотипа, который в этот момент уменьшается и поднимается.
Скопируйте эти файлы в components/dashboard-nav-bar/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { DashboardNavBar } from "@/components/dashboard-nav-bar/dashboard-nav-bar";
export function Dashboard() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-screen overflow-y-auto">
<DashboardNavBar
scrollContainerRef={scrollRef}
teamName="Моя команда"
tabs={[{ label: "Обзор" }, { label: "Аналитика" }, { label: "Настройки" }]}
/>
</div>
);
}teamName?Название команды в крошках
Тип string·По умолчанию "Проекты Astra"
plan?Метка тарифа
Тип string·По умолчанию "Хобби"
projectName?Название проекта
Тип string·По умолчанию "astra-ui-demo"
avatarSrc?Аватар команды
Тип string·По умолчанию "/web-components/_photos/avatar-1.webp"
logo?Свой логотип вместо знака Astra
Тип ReactNode
projectIcon?Своя иконка проекта
Тип ReactNode
tabs?Список вкладок { label }
Тип DashboardNavTab[]·По умолчанию десять вкладок
scrollContainerRef?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
tabsShift?На сколько пикселей сдвигаются вкладки при прокрутке
Тип number·По умолчанию 42
logoScaleTo?Масштаб логотипа после прокрутки
Тип number·По умолчанию 0.8
cardRadius?Скругление карточек заглушки в пикселях
Тип number
children?Содержимое страницы под навигацией
Тип ReactNode·По умолчанию сетка-заглушка
className?Классы корневого блока
Тип string