121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
|
<div class="layout">
|
|
<ClientOnly>
|
|
<UHeader
|
|
title="AT Golden"
|
|
:toggle="false"
|
|
:ui="{
|
|
root: 'fixed bg-transparent w-full',
|
|
left: 'relative flex items-center w-full',
|
|
container: 'gap-0',
|
|
right: 'hidden',
|
|
}"
|
|
>
|
|
<template #left>
|
|
<NuxtLink to="/" class="text-lg flex items-center gap-2">
|
|
<Icon name="my-icon:main-logo" :style="{ fontSize: isMobile ? '34px' : '48px' }" />
|
|
<div v-if="!isMobile">
|
|
AT Golden
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<div class="absolute left-1/2 transform -translate-x-1/2">
|
|
<UTabs v-model="activeTab" :size="isMobile ? 'md' : 'xl'" :content="false" :items="tabs" />
|
|
</div>
|
|
|
|
<!-- <UColorModeButton /> -->
|
|
<div class="ml-auto">
|
|
<UButton
|
|
:href="route.path.startsWith('/about-us') ? '/' : '#contacts'"
|
|
:size="isMobile ? 'md' : 'xl'"
|
|
:label="route.path.startsWith('/about-us') ? 'Вернуться' : 'Связаться'"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UHeader>
|
|
</ClientOnly>
|
|
|
|
<UMain>
|
|
<slot />
|
|
</UMain>
|
|
|
|
<BaseFooter />
|
|
|
|
<PromotionModal v-model="open" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TabsItem } from '@nuxt/ui'
|
|
import { useMediaQuery } from '@vueuse/core'
|
|
import BaseFooter from '~/components/BaseFooter.vue'
|
|
import PromotionModal from '~/components/PromotionModal.vue'
|
|
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const open = ref(false)
|
|
const toast = useToast()
|
|
|
|
const tabs = computed<TabsItem[]>(() => [
|
|
{
|
|
label: isMobile.value ? '' : 'Главная',
|
|
icon: 'i-lucide-home',
|
|
value: '/',
|
|
route: '/',
|
|
},
|
|
{
|
|
label: isMobile.value ? '' : 'Недвижимость',
|
|
icon: 'i-lucide-building-2',
|
|
value: 'nedvizhimost',
|
|
route: '/nedvizhimost',
|
|
},
|
|
{
|
|
label: isMobile.value ? '' : 'Авто',
|
|
icon: 'i-lucide-car',
|
|
value: 'transport',
|
|
route: '/transport',
|
|
},
|
|
])
|
|
|
|
function showToast() {
|
|
toast.add({
|
|
title: 'Уникальное предложение !',
|
|
description: 'покупка машины под ключ Кыргызстан',
|
|
duration: 30000,
|
|
actions: [{
|
|
icon: 'i-lucide-car',
|
|
label: 'Подробнее',
|
|
color: 'neutral',
|
|
variant: 'outline',
|
|
onClick: () => {
|
|
open.value = true
|
|
},
|
|
}],
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
showToast()
|
|
})
|
|
|
|
const activeTab = ref(route?.path.split('/')[1] || '/')
|
|
|
|
watch(() => activeTab.value, () => {
|
|
const tab = tabs.value.find(tab => tab.value === activeTab.value)
|
|
router.push(tab?.route)
|
|
})
|
|
|
|
watch(() => route?.path, () => {
|
|
const routerPath = route?.path?.split('/')[1]
|
|
|
|
if (routerPath === activeTab.value) {
|
|
return
|
|
}
|
|
|
|
activeTab.value = routerPath || '/'
|
|
})
|
|
</script>
|