111 lines
3.6 KiB
Vue
111 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { useQuery } from '@vue/apollo-composable';
|
|
import { MeDocument } from '~/composables/graphql/generated';
|
|
import { hasManagerAccess } from '~/utils/roles';
|
|
|
|
type NavItem = {
|
|
to: string;
|
|
label: string;
|
|
};
|
|
|
|
const route = useRoute();
|
|
const { totalItems } = useClientCart();
|
|
const meQuery = useQuery(MeDocument);
|
|
|
|
const centerCapsule = computed<NavItem[]>(() => {
|
|
const items: NavItem[] = [
|
|
{ to: '/', label: 'Каталог' },
|
|
{ to: '/orders', label: 'Мои заказы' },
|
|
];
|
|
|
|
if (hasManagerAccess(meQuery.result.value?.me?.role)) {
|
|
items.push(
|
|
{ to: '/clients', label: 'Пользователи' },
|
|
{ to: '/client-orders', label: 'Заказы' },
|
|
{ to: '/bonus-system', label: 'Бонусы' },
|
|
);
|
|
}
|
|
|
|
return items;
|
|
});
|
|
|
|
const rightCapsule: NavItem[] = [
|
|
{ to: '/cart', label: 'Корзина' },
|
|
{ to: '/profile', label: 'Профиль' },
|
|
];
|
|
|
|
function isActive(path: string) {
|
|
if (path === '/') {
|
|
return route.path === '/' || route.path.startsWith('/products');
|
|
}
|
|
if (path === '/orders') {
|
|
return route.path === '/orders' || route.path.startsWith('/orders/');
|
|
}
|
|
if (path === '/clients') {
|
|
return route.path === '/clients' || route.path.startsWith('/clients/');
|
|
}
|
|
if (path === '/client-orders') {
|
|
return route.path === '/client-orders' || route.path.startsWith('/client-orders/');
|
|
}
|
|
if (path === '/bonus-system') {
|
|
return route.path === '/bonus-system' || route.path.startsWith('/bonus-system/');
|
|
}
|
|
return route.path === path;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
|
|
<div class="fregat-header-backdrop" aria-hidden="true" />
|
|
|
|
<div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
|
|
<div class="fregat-header-row relative flex items-center">
|
|
<NuxtLink
|
|
to="/"
|
|
class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center rounded-full p-1"
|
|
>
|
|
<span class="lk-nav-link lk-nav-link-brand">Fregat</span>
|
|
</NuxtLink>
|
|
|
|
<nav class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
|
|
<template v-for="(item, index) in centerCapsule" :key="item.to">
|
|
<NuxtLink
|
|
:to="item.to"
|
|
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
<div
|
|
v-if="index < centerCapsule.length - 1"
|
|
class="lk-pill-divider mx-1 h-6 w-px shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
</template>
|
|
</nav>
|
|
|
|
<nav class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
|
|
<template v-for="(item, index) in rightCapsule" :key="item.to">
|
|
<NuxtLink
|
|
:to="item.to"
|
|
:class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
|
|
>
|
|
<span>{{ item.label }}</span>
|
|
<span
|
|
v-if="item.to === '/cart' && totalItems > 0"
|
|
class="badge badge-sm border-0 bg-[#139957] text-white"
|
|
>
|
|
{{ totalItems }}
|
|
</span>
|
|
</NuxtLink>
|
|
<div
|
|
v-if="index < rightCapsule.length - 1"
|
|
class="lk-pill-divider mx-1 h-6 w-px shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|