<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase

const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`, { headers: useRequestHeaders(['referer']) })
const route = useRoute()
</script>
<template>
    <div class="header">
        <div class="container">
            <div class="logo">
                <NuxtLink to="/">
                    Купи забор
                </NuxtLink>
            </div>
            <div class="menu">
                <template v-for="item in pagesData">
                    <NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
                        :target="item.external_link ? '_blank' : '_self'">
                        {{ item.menu_title }}
                    </NuxtLink>
                </template>
            </div>
        </div>
    </div>
</template>
