Add topnav layout with MainNavigation, SubNavigation, GlobalSearchBar, SplitLayout

app/components/layout/SplitLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex-1 flex flex-col lg:flex-row min-h-0">
+    <!-- List panel -->
+    <div
+      class="flex-1 overflow-auto lg:w-3/5 lg:max-w-none"
+      :class="{ 'hidden lg:block': mobileView === 'map' }"
+    >
+      <slot name="list" />
+    </div>
+
+    <!-- Map panel -->
+    <div
+      class="lg:w-2/5 lg:sticky lg:top-0 lg:h-[calc(100vh-13rem)]"
+      :class="{ 'hidden lg:block': mobileView === 'list', 'flex-1': mobileView === 'map' }"
+    >
+      <slot name="map" />
+    </div>
+
+    <!-- Mobile toggle -->
+    <div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
+      <div class="btn-group shadow-lg">
+        <button
+          class="btn btn-sm"
+          :class="{ 'btn-active': mobileView === 'list' }"
+          @click="mobileView = 'list'"
+        >
+          <Icon name="lucide:list" size="16" />
+          {{ $t('common.list') }}
+        </button>
+        <button
+          class="btn btn-sm"
+          :class="{ 'btn-active': mobileView === 'map' }"
+          @click="mobileView = 'map'"
+        >
+          <Icon name="lucide:map" size="16" />
+          {{ $t('common.map') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  defaultView?: 'list' | 'map'
+}>()
+
+const mobileView = ref<'list' | 'map'>(props.defaultView || 'list')
+</script>