/
45case
/
ptable
Обзор
Документация
Войти
/
45case
/
ptable
Код
Запросы
3
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
master
src/app/AppNavbar.vue
40 строк
1 KB
Olya
first_commit
06 июл 2026, 18:16
06 июл 2026, 18:16
0ff6e29
Код
Авторство
О чём код?
<script setup lang="ts"> import NavLink from "@/shared/ui/NavLink.vue"; import ThemeSwitchButton from "@/shared/ui/ThemeSwitchButton.vue"; const links = [ { to: "/", label: "Главная" }, { to: "/properties", label: "Состояния" }, { to: "/electrons", label: "Электроны" }, { to: "/isotopes", label: "Изотопы" }, { to: "/compounds", label: "Соединения" }, ]; </script> <template> <header class="sticky top-0 z-50 px-5 pt-4"> <div class="mx-auto flex w-full max-w-350 flex-wrap items-center justify-center gap-4 rounded-3xl border border-(--color-border) bg-[color-mix(in_srgb,var(--color-surface)_90%,transparent)] px-4 py-3 shadow-[0_10px_30px_var(--color-shadow)] backdrop-blur-xl sm:justify-between sm:px-5" > <RouterLink class="font-(family-name:--font-heading) text-2xl font-semibold tracking-[-0.04em] no-underline" to="/" > Периодическая таблица </RouterLink> <nav aria-label="Основная навигация" class="order-1 flex w-full flex-wrap justify-center gap-2 sm:order-0 sm:w-auto sm:flex-1" > <NavLink v-for="link in links" :key="link.to" :to="link.to"> {{ link.label }} </NavLink> </nav> <div class="flex items-center gap-2"> <ThemeSwitchButton /> </div> </div> </header> </template>