45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import k_logo from '@/assets/LOGO.svg'
|
|
|
|
const { fetchData } = useApiFetch()
|
|
const route = useRoute()
|
|
|
|
const { data, status, error } = await fetchData<Menu[]>(`menu`)
|
|
const menu = computed(() => {
|
|
const menu = data.value?.find(el => el.type == 1)
|
|
return (menu?.pages || []).sort((a, b) => a.order - b.order)
|
|
})
|
|
|
|
const menu_visible = ref(false)
|
|
const toggle_menu = () => {
|
|
if (window.innerWidth < 1280) {
|
|
menu_visible.value = !menu_visible.value
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<NuxtLink to="/">
|
|
<k_logo />
|
|
<span class="logo_text">Купи Урну!</span>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="menu-toggle">
|
|
<span @click="toggle_menu">
|
|
<Icon name="mdi:menu" />
|
|
</span>
|
|
</div>
|
|
<div class="menu" :class="[{ 'toggle_visible': menu_visible }]">
|
|
<template v-for="item in menu">
|
|
<NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
|
|
:target="item.external_link ? '_blank' : '_self'" @click="toggle_menu">
|
|
{{ item.menu_title }}
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|