valitovgaziz
78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
<template>
|
|
<nav class="bottom-nav">
|
|
<NuxtLink to="/" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/' }">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>Главная</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/search" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path.startsWith('/search') }">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span>Поиск</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/favorites" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/favorites' }">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
</svg>
|
|
<span>Избранное</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/profile" class="bottom-nav__item" :class="{ 'bottom-nav__item--active': $route.path === '/profile' }">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M4 21v-1a6 6 0 0112 0v1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span>Профиль</span>
|
|
</NuxtLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottom-nav {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--bottom-nav-height);
|
|
background: var(--color-white);
|
|
border-top: 1px solid var(--color-stroke);
|
|
z-index: 100;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
@media (max-width: 744px) {
|
|
.bottom-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
.bottom-nav__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 6px 12px;
|
|
color: var(--color-text-gray);
|
|
font-size: 10px;
|
|
font-family: var(--font-body);
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.bottom-nav__item--active {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.bottom-nav__item svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
</style>
|