Add topnav layout with MainNavigation, SubNavigation, GlobalSearchBar, SplitLayout

app/components/navigation/SubNavigation.vue

@@ -0,0 +1,63 @@
+<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>
+.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>