6d1dd4eac5
Some checks failed
Build Docker Image / build (push) Failing after 1m46s
Add @reference 'tailwindcss' to components using @apply in scoped styles: - MainNavigation.vue - SubNavigation.vue - GlobalSearchBar.vue Required for Tailwind CSS 4 compatibility with scoped Vue styles.
66 lines
2.1 KiB
Vue
66 lines
2.1 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="subnav-item"
|
|
:class="{ active: isActive(item.path) }"
|
|
>
|
|
<Icon v-if="item.icon" :name="item.icon" size="16" class="mr-1.5" />
|
|
{{ 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', icon: 'lucide:tag' },
|
|
{ label: t('cabinetNav.suppliers'), path: '/catalog/suppliers', icon: 'lucide:users' },
|
|
{ label: t('cabinetNav.hubs'), path: '/catalog/hubs', icon: 'lucide:warehouse' },
|
|
],
|
|
orders: [
|
|
{ label: t('cabinetNav.orders'), path: '/clientarea/orders', icon: 'lucide:package' },
|
|
{ label: t('cabinetNav.addresses'), path: '/clientarea/addresses', icon: 'lucide:map-pin' },
|
|
{ label: t('cabinetNav.billing'), path: '/clientarea/billing', icon: 'lucide:credit-card' },
|
|
],
|
|
seller: [
|
|
{ label: t('cabinetNav.myOffers'), path: '/clientarea/offers', icon: 'lucide:tag' },
|
|
],
|
|
settings: [
|
|
{ label: t('cabinetNav.profile'), path: '/clientarea/profile', icon: 'lucide:user' },
|
|
{ label: t('cabinetNav.team'), path: '/clientarea/team', icon: 'lucide:users' },
|
|
],
|
|
}))
|
|
|
|
const items = computed(() => sectionItems.value[props.section] || [])
|
|
|
|
const isActive = (path: string) => {
|
|
return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.subnav-item {
|
|
@apply px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap;
|
|
@apply text-base-content/70 hover:text-base-content hover:bg-base-200;
|
|
}
|
|
|
|
.subnav-item.active {
|
|
@apply text-primary bg-primary/10;
|
|
}
|
|
</style>
|