<template>
    <NuxtLayout :name="device" :config="config">
        <main class="blog">
            <BlogCategories v-if="device == 'desktop'" />
            <BlogList />
            <BlogAside />
        </main>
    </NuxtLayout>
</template>

<script setup>
const config = reactive({
    mobile: { header: { search: true, menu: true }, navigation: false },
})

const { sidebar, device } = inject('service')
const route = useRoute()
const { page = 1, ...params } = route.query

const { status, data, error } = await useFetch(`/api/posts/${page}`, { params })

if (status.value == 'success') {
    sidebar.is = resolveComponent('BlogCategories')
    sidebar.props = { data }
    useSeoMeta(data.value.meta || {})
    provide('data', data.value)
}
else throw createError(error.value)

</script>

<style lang="scss">
.blog {
    @apply w-full mx-auto flex flex-col gap-12 lg:gap-6 py-[1.9rem] lg:pt-12 lg:pb-[7.1rem];
    @apply lg:flex-row lg:px-6 justify-around 2xl:justify-start 2xl:items-start container 2xl:max-w-[120rem];
    @apply min-[1725px]:justify-between;
}
</style>
