104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<template>
|
|
<nav class="bottom-nav" aria-label="Навигация">
|
|
<RouterLink
|
|
v-for="item in navItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="bottom-nav__item"
|
|
:class="{ 'bottom-nav__item--active': isActive(item.path) }"
|
|
:aria-label="item.label"
|
|
:aria-current="isActive(item.path) ? 'page' : undefined"
|
|
>
|
|
<span class="bottom-nav__icon">
|
|
<BottomNavIcon :name="item.icon" />
|
|
</span>
|
|
<span class="bottom-nav__label">{{ item.label }}</span>
|
|
</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const navItems = [
|
|
{ path: '/feed', label: 'Лента', icon: 'grid' },
|
|
{ path: '/matches', label: 'Совпадения', icon: 'heart' },
|
|
{ path: '/chats', label: 'Чаты', icon: 'chat' },
|
|
{ path: '/dates', label: 'Встречи', icon: 'calendar' },
|
|
{ path: '/profile/me', label: 'Профиль', icon: 'person' },
|
|
]
|
|
|
|
function isActive(path: string) {
|
|
return route.path.startsWith(path)
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const BottomNavIcon = {
|
|
props: { name: String },
|
|
template: `
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path v-if="name==='grid'" d="M3 3h7v7H3zm11 0h7v7h-7zM3 14h7v7H3zm11 0h7v7h-7z"/>
|
|
<path v-if="name==='heart'" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
|
<path v-if="name==='chat'" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
|
<path v-if="name==='calendar'" d="M8 2v4M16 2v4M3 10h18M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<path v-if="name==='person'" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
|
|
</svg>
|
|
`,
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bottom-nav {
|
|
display: flex;
|
|
height: var(--nav-height);
|
|
background: var(--color-surface);
|
|
border-top: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
|
|
&__item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
padding: 8px 4px;
|
|
|
|
&:hover {
|
|
color: var(--color-cream);
|
|
}
|
|
|
|
&--active {
|
|
color: var(--color-cream);
|
|
|
|
.bottom-nav__icon {
|
|
color: var(--color-signal);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
</style>
|