63 lines
3.3 KiB
Vue
63 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
type DockItem = {
|
|
to: string;
|
|
label: string;
|
|
icon: 'orders' | 'bonus' | 'settings';
|
|
};
|
|
|
|
const route = useRoute();
|
|
|
|
const dockItems: DockItem[] = [
|
|
{ to: '/client-orders', label: 'Заказы', icon: 'orders' },
|
|
{ to: '/bonus-system', label: 'Бонусы', icon: 'bonus' },
|
|
{ to: '/messages', label: 'Настройки', icon: 'settings' },
|
|
];
|
|
|
|
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/');
|
|
}
|
|
if (path === '/messages') {
|
|
return route.path === '/messages';
|
|
}
|
|
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-if="item.icon === 'bonus'" 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>
|
|
<svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5">
|
|
<path d="M12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25Z" stroke="currentColor" stroke-width="1.8" />
|
|
<path d="M19.25 13.25V10.75L17.4539 10.2018C17.3255 9.82617 17.1745 9.46304 17.0023 9.11134L17.875 7.45833L16.0417 5.625L14.3887 6.4977C14.037 6.32552 13.6738 6.17449 13.2982 6.04607L12.75 4.25H10.25L9.70183 6.04607C9.32617 6.17449 8.96304 6.32552 8.61134 6.4977L6.95833 5.625L5.125 7.45833L5.9977 9.11134C5.82552 9.46304 5.67449 9.82617 5.54607 10.2018L3.75 10.75V13.25L5.54607 13.7982C5.67449 14.1738 5.82552 14.537 5.9977 14.8887L5.125 16.5417L6.95833 18.375L8.61134 17.5023C8.96304 17.6745 9.32617 17.8255 9.70183 17.9539L10.25 19.75H12.75L13.2982 17.9539C13.6738 17.8255 14.037 17.6745 14.3887 17.5023L16.0417 18.375L17.875 16.5417L17.0023 14.8887C17.1745 14.537 17.3255 14.1738 17.4539 13.7982L19.25 13.25Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
<span class="manager-dock__label">{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|