f34c484561
All checks were successful
Build Docker Image / build (push) Successful in 3m40s
- Reorder topnav components: search bar before submenu - GlobalSearchBar: use page navigation instead of dropdowns - Remove icons from MainNavigation and SubNavigation - Create ListMapLayout universal component for list+map pages - Migrate catalog pages (offers, suppliers, hubs) to ListMapLayout
53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<template>
|
|
<nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
|
|
<div class="flex items-center justify-center gap-1 py-2 px-4 overflow-x-auto">
|
|
<NuxtLink
|
|
v-for="item in items"
|
|
:key="item.path"
|
|
:to="localePath(item.path)"
|
|
class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-200"
|
|
:class="{ 'text-primary bg-primary/10': 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: t('cabinetNav.offers'), path: '/catalog/offers' },
|
|
{ label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
|
|
{ label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
|
|
],
|
|
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>
|
|
|