optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navigation layout and search behavior
All checks were successful
Build Docker Image / build (push) Successful in 3m40s
Details

Browse Source 
- 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
This commit is contained in:
Ruslan Bakiev
2026-01-08 09:16:56 +07:00
parent 1a2693bcd6
commit f34c484561
8 changed files with 289 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/navigation/MainNavigation.vue
View File

@@ -17,7 +17,6 @@
class="px-4 py-2 rounded-full font-medium text-sm transition-colors hover:bg-base-200"
:class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
>
<Icon v-if="tab.icon" :name="tab.icon" size="18" class="mr-1" />
{{ tab.label }}
</NuxtLink>
</nav>
@@ -137,11 +136,10 @@
v-for="tab in visibleTabs"
:key="tab.key"
:to="localePath(tab.path)"
class="flex flex-col items-center gap-1 px-4 py-2 rounded-lg hover:bg-base-200"
class="px-4 py-2 rounded-full text-sm font-medium hover:bg-base-200"
:class="{ 'bg-base-200 text-primary': isActiveTab(tab.key) }"
>
<Icon v-if="tab.icon" :name="tab.icon" size="16" />
<span class="text-xs">{{ tab.label }}</span>
{{ tab.label }}
</NuxtLink>
</nav>
</header>
@@ -173,9 +171,9 @@ const route = useRoute()
const { t } = useI18n()
const tabs = computed(() => [
{ key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', icon: 'lucide:search', auth: false },
{ key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', icon: 'lucide:package', auth: true },
{ key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', icon: 'lucide:store', auth: true, seller: true },
{ key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', auth: false },
{ key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', auth: true },
{ key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', auth: true, seller: true },
])
const visibleTabs = computed(() => {

19
app/components/navigation/SubNavigation.vue
View File

@@ -8,7 +8,6 @@
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) }"
>
<Icon v-if="item.icon" :name="item.icon" size="16" class="mr-1.5" />
{{ item.label }}
</NuxtLink>
</div>
@@ -26,21 +25,21 @@ 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' },
{ 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', 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' },
{ 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', icon: 'lucide:tag' },
{ label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
],
settings: [
{ label: t('cabinetNav.profile'), path: '/clientarea/profile', icon: 'lucide:user' },
{ label: t('cabinetNav.team'), path: '/clientarea/team', icon: 'lucide:users' },
{ label: t('cabinetNav.profile'), path: '/clientarea/profile' },
{ label: t('cabinetNav.team'), path: '/clientarea/team' },
],
}))