Fix navigation layout and search behavior

- 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

app/pages/catalog/hubs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="t('catalogHubsSection.header.title')" />
@@ -15,10 +15,17 @@
       </Card>
     </div>
 
-    <!-- Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedHubId"
+      map-id="hubs-map"
+      point-color="#10b981"
+      @select-item="onSelectHub"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -29,6 +36,8 @@
                 v-for="hub in country.hubs"
                 :key="hub.uuid"
                 :hub="hub"
+                :class="{ 'ring-2 ring-primary': hub.uuid === selectedHubId }"
+                @click="onSelectHub(hub.uuid)"
               />
             </Stack>
           </div>
@@ -45,19 +54,8 @@
             <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="hubs-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -75,13 +73,20 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   itemsByCountry,
   canLoadMore,
   loadMore,
   init
 } = useCatalogHubs()
 
+// Selected hub for map highlighting
+const selectedHubId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectHub = (uuid: string) => {
+  selectedHubId.value = uuid
+}
+
 await init()
 
 useHead(() => ({

app/pages/catalog/offers/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="pageTitle">
@@ -46,10 +46,17 @@
       </Stack>
     </div>
 
-    <!-- Offers for selected product - Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- Offers for selected product - ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedOfferId"
+      map-id="offers-map"
+      point-color="#f59e0b"
+      @select-item="onSelectOffer"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -58,6 +65,8 @@
               v-for="offer in items"
               :key="offer.uuid"
               :offer="offer"
+              :class="{ 'ring-2 ring-primary': offer.uuid === selectedOfferId }"
+              @click="onSelectOffer(offer.uuid)"
             />
           </Stack>
 
@@ -73,19 +82,8 @@
             <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="offers-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -114,7 +112,6 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   canLoadMore,
   loadMore,
   init: initOffers,
@@ -144,6 +141,15 @@ const selectProduct = (product: any) => {
   })
 }
 
+// Selected offer for map highlighting
+const selectedOfferId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectOffer = (uuid: string) => {
+  selectedOfferId.value = uuid
+  // flyToItem will be triggered by ListMapLayout watch
+}
+
 // Initialize
 await initProducts()
 

app/pages/catalog/suppliers/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-[calc(100vh-200px)]">
+  <div class="flex flex-col flex-1 min-h-0">
     <!-- Header -->
     <div class="py-4">
       <PageHeader :title="t('catalogSuppliersSection.header.title')" />
@@ -15,10 +15,17 @@
       </Card>
     </div>
 
-    <!-- Split Layout -->
-    <div v-else class="flex-1 flex gap-4 min-h-0">
-      <!-- Left side: Filters + Cards (scrollable) -->
-      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else
+      ref="listMapRef"
+      :items="items"
+      :selected-item-id="selectedSupplierId"
+      map-id="suppliers-map"
+      point-color="#3b82f6"
+      @select-item="onSelectSupplier"
+    >
+      <template #list>
         <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
@@ -27,6 +34,8 @@
               v-for="supplier in items"
               :key="supplier.uuid || supplier.teamUuid"
               :supplier="supplier"
+              :class="{ 'ring-2 ring-primary': (supplier.uuid || supplier.teamUuid) === selectedSupplierId }"
+              @click="onSelectSupplier(supplier.uuid || supplier.teamUuid)"
             />
           </Stack>
 
@@ -42,19 +51,8 @@
             <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
           </Stack>
         </Stack>
-      </div>
-
-      <!-- Right side: Map (sticky, hidden on mobile) -->
-      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
-        <ClientOnly>
-          <MapboxGlobe
-            map-id="suppliers-map"
-            :locations="itemsWithCoords"
-            class="h-full w-full"
-          />
-        </ClientOnly>
-      </div>
-    </div>
+      </template>
+    </ListMapLayout>
   </div>
 </template>
 
@@ -72,12 +70,19 @@ const {
   filters,
   isLoading,
   isLoadingMore,
-  itemsWithCoords,
   canLoadMore,
   loadMore,
   init
 } = useCatalogSuppliers()
 
+// Selected supplier for map highlighting
+const selectedSupplierId = ref<string>()
+const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
+
+const onSelectSupplier = (uuid: string) => {
+  selectedSupplierId.value = uuid
+}
+
 await init()
 
 useHead(() => ({