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(() => ({