<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>
