Дмитрий
60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
/** Нижняя панель-вкладки для телефона. 5 главных разделов; остальное — в «Ещё». */
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
import { computed } from 'vue';
|
|
|
|
interface Tab { title: string; to: string; }
|
|
const tabs: Tab[] = [
|
|
{ title: 'Поле', to: '/autopodbor' },
|
|
{ title: 'Проекты', to: '/projects' },
|
|
{ title: 'Сделки', to: '/deals' },
|
|
{ title: 'Биллинг', to: '/billing' },
|
|
{ title: 'Канбан', to: '/kanban' },
|
|
];
|
|
const route = useRoute();
|
|
const activeTo = computed(() => tabs.find((t) => route.path === t.to)?.to ?? '');
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="ld-bottomnav" aria-label="Основная навигация">
|
|
<RouterLink
|
|
v-for="t in tabs"
|
|
:key="t.to"
|
|
:to="t.to"
|
|
data-testid="bottomnav-item"
|
|
class="ld-bottomnav__item"
|
|
:class="{ 'ld-bottomnav__item--active': activeTo === t.to }"
|
|
>
|
|
<span class="ld-bottomnav__label">{{ t.title }}</span>
|
|
</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ld-bottomnav {
|
|
position: fixed;
|
|
left: 0; right: 0; bottom: 0;
|
|
z-index: 1010;
|
|
display: flex;
|
|
height: 64px;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
background: #ffffff;
|
|
border-top: 1px solid rgba(1, 32, 25, 0.1);
|
|
}
|
|
.ld-bottomnav__item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
min-height: 56px;
|
|
text-decoration: none;
|
|
color: rgba(1, 32, 25, 0.55);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.ld-bottomnav__item--active { color: var(--liderra-teal); }
|
|
.ld-bottomnav__label { line-height: 1; }
|
|
</style>
|