Add map view toggle for fullWidthMap mode
All checks were successful
Build Docker Image / build (push) Successful in 3m25s

- Add MapViewMode type (offers/hubs/suppliers) with cookie storage
- Add view toggle button group on full-width map
- Update clusterNodeType and mapPointColor based on selected view
- Add translations for view options
This commit is contained in:
Ruslan Bakiev
2026-01-22 18:41:38 +07:00
parent 2d86c79b06
commit 749f15131b
5 changed files with 74 additions and 4 deletions

View File

@@ -36,6 +36,32 @@
<div v-if="fullWidthMap" class="hidden lg:flex flex-1 min-h-0 py-4">
<div class="w-full">
<div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
<!-- View mode toggle -->
<div class="absolute top-4 left-4 z-10">
<div class="btn-group shadow-lg bg-white/90 backdrop-blur rounded-lg">
<button
class="btn btn-sm"
:class="{ 'btn-active': mapViewMode === 'offers' }"
@click="setMapViewMode('offers')"
>
{{ $t('catalog.views.offers') }}
</button>
<button
class="btn btn-sm"
:class="{ 'btn-active': mapViewMode === 'hubs' }"
@click="setMapViewMode('hubs')"
>
{{ $t('catalog.views.hubs') }}
</button>
<button
class="btn btn-sm"
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
@click="setMapViewMode('suppliers')"
>
{{ $t('catalog.views.suppliers') }}
</button>
</div>
</div>
<ClientOnly>
<CatalogMap
ref="mapRef"
@@ -217,6 +243,9 @@
<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
// Map view mode for full width map
const { mapViewMode, setMapViewMode } = useCatalogSearch()
interface MapItem {
uuid: string
latitude?: number | null