Компоненты/Меню тура

Меню тура

29 сентября 2026

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

Установка

npm install motion
pnpm add motion
yarn add motion
bun add motion

Файлы

tour-menu.tsx
НазадОбмен токеновДалееПоднос

Компактная полупрозрачная навигация наверху страницы с логотипом и кнопкой «Меню». По нажатию панель вытягивается на всю высоту блока и показывает список городов с числом участников, ссылки на документы и выбор языка.

Кнопка сменяется на «Закрыть», а щелчок вне панели сворачивает её обратно.

Вручную

Скопируйте эти файлы в components/tour-menu/:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { TourMenu } from "@/components/tour-menu/tour-menu";

export default function Page() {
return (
  <section className="relative h-screen overflow-hidden bg-black">
    <TourMenu menuLabel="Меню" closeLabel="Закрыть" />
  </section>
);
}

Пропсы

Пропс
Описание
cities?

Города в меню: название и число участников

Тип TourCity[]·По умолчанию 7 городов

menuLabel?

Надпись на кнопке открытия

Тип string·По умолчанию "Меню"

closeLabel?

Надпись на кнопке закрытия

Тип string·По умолчанию "Закрыть"

links?

Две ссылки под списком

Тип [string, string]·По умолчанию ["Конфиденциальность", "Условия"]

languages?

Языки, первый подсвечен

Тип string[]·По умолчанию ["RU", "EN", "ES", "FR"]

accentColor?

Цвет городов и активного языка

Тип string·По умолчанию #66d9e8

defaultOpen?

Открыть меню сразу

Тип boolean·По умолчанию false