Files
webapp/app/components/CabinetBreadcrumbs.vue
2026-01-07 09:10:35 +07:00

64 lines
1.8 KiB
Vue

<template>
<div class="breadcrumbs text-sm">
<ul>
<li v-for="(crumb, index) in breadcrumbs" :key="index">
<NuxtLink v-if="crumb.to" :to="crumb.to">{{ crumb.label }}</NuxtLink>
<span v-else>{{ crumb.label }}</span>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
const route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()
const breadcrumbs = computed(() => {
const path = route.path
const crumbs: Array<{ label: string; to?: string }> = []
// Always start with Cabinet
crumbs.push({ label: t('breadcrumbs.cabinet'), to: localePath('/clientarea') })
// Parse path segments after /clientarea
const segments = path.replace(/^\/[a-z]{2}\//, '/').replace('/clientarea', '').split('/').filter(Boolean)
const pathMap: Record<string, string> = {
orders: t('breadcrumbs.orders'),
addresses: t('breadcrumbs.addresses'),
profile: t('breadcrumbs.profile'),
team: t('breadcrumbs.team'),
kyc: t('breadcrumbs.kyc'),
offers: t('breadcrumbs.offers'),
new: t('breadcrumbs.new'),
russia: t('breadcrumbs.russia'),
ai: t('breadcrumbs.ai'),
goods: t('breadcrumbs.goods'),
locations: t('breadcrumbs.locations'),
request: t('breadcrumbs.request'),
'company-switch': t('breadcrumbs.companySwitch'),
'debug-tokens': t('breadcrumbs.tokens'),
}
let currentPath = '/clientarea'
for (let i = 0; i < segments.length; i++) {
const segment = segments[i]
currentPath += `/${segment}`
const isLast = i === segments.length - 1
// Check if segment is UUID or ID
const isId = /^[0-9a-f-]{36}$/.test(segment) || /^\d+$/.test(segment)
const label = isId ? `#${segment.slice(0, 8)}...` : (pathMap[segment] || segment)
crumbs.push({
label,
to: isLast ? undefined : localePath(currentPath)
})
}
return crumbs
})
</script>