52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<template>
|
|
<nav v-if="items.length > 0" class="mx-auto mt-2 w-full max-w-[2200px] px-3 md:px-4">
|
|
<div class="flex items-center gap-1 overflow-x-auto rounded-[24px] border border-[#e2d8ca] bg-[#efe6d8]/92 px-3 py-2 shadow-[0_14px_34px_rgba(47,36,24,0.08)] backdrop-blur">
|
|
<NuxtLink
|
|
v-for="item in items"
|
|
:key="item.path"
|
|
:to="localePath(item.path)"
|
|
class="rounded-full px-4 py-2 text-sm font-bold whitespace-nowrap transition-colors text-[#5f4b33] hover:bg-[#f8f3ec]"
|
|
:class="{ 'bg-[#2f2418] text-white shadow-[0_10px_24px_rgba(47,36,24,0.16)]': isActive(item.path) }"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
section: 'catalog' | 'orders' | 'seller' | 'settings'
|
|
}>()
|
|
|
|
const localePath = useLocalePath()
|
|
const route = useRoute()
|
|
const { t } = useI18n()
|
|
|
|
const sectionItems = computed(() => ({
|
|
catalog: [
|
|
{ label: 'Предложения', path: '/catalog?select=product' },
|
|
{ label: t('cabinetNav.suppliers'), path: '/catalog?select=supplier' },
|
|
{ label: t('cabinetNav.hubs'), path: '/catalog?select=hub' },
|
|
],
|
|
orders: [
|
|
{ label: t('cabinetNav.orders'), path: '/clientarea/orders' },
|
|
{ label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
|
|
{ label: t('cabinetNav.billing'), path: '/clientarea/billing' },
|
|
],
|
|
seller: [
|
|
{ label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
|
|
],
|
|
settings: [
|
|
{ label: t('cabinetNav.profile'), path: '/clientarea/profile' },
|
|
{ label: t('cabinetNav.team'), path: '/clientarea/team' },
|
|
],
|
|
}))
|
|
|
|
const items = computed(() => sectionItems.value[props.section] || [])
|
|
|
|
const isActive = (path: string) => {
|
|
return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
|
|
}
|
|
</script>
|