85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
type NavItem = {
|
|
to: string;
|
|
label: string;
|
|
};
|
|
|
|
const route = useRoute();
|
|
const { totalItems } = useClientCart();
|
|
|
|
const centerCapsule: NavItem[] = [
|
|
{ to: '/', label: 'Каталог' },
|
|
{ to: '/orders', label: 'Мои заказы' },
|
|
];
|
|
|
|
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/');
|
|
}
|
|
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>
|