50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<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>
|