55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
type DockItem = {
|
|
to: string;
|
|
label: string;
|
|
icon: 'orders' | 'bonus';
|
|
};
|
|
|
|
const route = useRoute();
|
|
|
|
const dockItems: DockItem[] = [
|
|
{ to: '/client-orders', label: 'Заказы', icon: 'orders' },
|
|
{ to: '/bonus-system', label: 'Бонусы', icon: 'bonus' },
|
|
];
|
|
|
|
function isActive(path: string) {
|
|
if (path === '/client-orders') {
|
|
return route.path === '/client-orders'
|
|
|| route.path.startsWith('/client-orders/')
|
|
|| route.path === '/clients'
|
|
|| route.path.startsWith('/clients/');
|
|
}
|
|
if (path === '/bonus-system') {
|
|
return route.path === '/bonus-system' || route.path.startsWith('/bonus-system/');
|
|
}
|
|
return route.path === path;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="manager-dock-shell" aria-label="Навигация менеджера">
|
|
<div class="manager-dock">
|
|
<NuxtLink
|
|
v-for="item in dockItems"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="manager-dock__item"
|
|
:class="{ 'manager-dock__item--active': isActive(item.to) }"
|
|
>
|
|
<span class="manager-dock__icon" aria-hidden="true">
|
|
<svg v-if="item.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5">
|
|
<path d="M7 6.75H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
|
<path d="M7 12H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
|
<path d="M7 17.25H13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
|
|
<rect x="4" y="4" width="16" height="16" rx="4" stroke="currentColor" stroke-width="1.8" />
|
|
</svg>
|
|
<svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5">
|
|
<path d="M12 4.75L14.2401 9.28984L19.25 10.0172L15.625 13.5504L16.4802 18.5398L12 16.1848L7.51983 18.5398L8.375 13.5504L4.75 10.0172L9.75987 9.28984L12 4.75Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
<span class="manager-dock__label">{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|