Move mode toggle to TopNav, view toggle to map right
All checks were successful
Build Docker Image / build (push) Successful in 3m32s

- Add [Explore/Quote] mode toggle to MainNavigation.vue (TopNav)
- Remove mode toggle from CatalogPage.vue (now in header)
- Move [Offers/Hubs/Suppliers] view toggle from top-left to top-right on map
- View toggle now visible in both modes (Explore and Quote)
- Simplify mobile layout to show only view toggle
This commit is contained in:
Ruslan Bakiev
2026-01-22 19:32:39 +07:00
parent ddf691c83b
commit 7465b1d6a2
3 changed files with 41 additions and 50 deletions

View File

@@ -67,6 +67,28 @@
</div>
</div>
<!-- Catalog mode toggle (only on catalog pages) -->
<div v-if="showCatalogModeToggle" class="flex-shrink-0 py-2.5">
<div class="tabs tabs-boxed tabs-sm bg-base-200">
<button
class="tab"
:class="{ 'tab-active': catalogMode === 'explore' }"
@click="$emit('set-catalog-mode', 'explore')"
>
<Icon name="lucide:compass" size="14" class="mr-1" />
{{ $t('catalog.modes.explore') }}
</button>
<button
class="tab"
:class="{ 'tab-active': catalogMode === 'quote' }"
@click="$emit('set-catalog-mode', 'quote')"
>
<Icon name="lucide:search" size="14" class="mr-1" />
{{ $t('catalog.modes.quote') }}
</button>
</div>
</div>
<!-- Right: AI + Globe + Team + User -->
<div class="flex items-center gap-1 flex-shrink-0 py-2.5">
<!-- AI Assistant button -->
@@ -188,6 +210,8 @@
import type { SelectMode } from '~/composables/useCatalogSearch'
import { entityColors } from '~/composables/useCatalogSearch'
import type { CatalogMode } from '~/composables/useCatalogSearch'
const props = defineProps<{
sessionChecked?: boolean
loggedIn?: boolean
@@ -207,6 +231,9 @@ const props = defineProps<{
availableChips?: Array<{ type: string; label: string }>
selectMode?: SelectMode
searchQuery?: string
// Catalog mode props
showCatalogModeToggle?: boolean
catalogMode?: CatalogMode
}>()
defineEmits([
@@ -219,7 +246,9 @@ defineEmits([
'cancel-select',
'edit-token',
'remove-token',
'update:search-query'
'update:search-query',
// Catalog mode
'set-catalog-mode'
])
const localePath = useLocalePath()