<template>
    <AppMobileHeader v-if="header" />
    <slot />
    <AppMobileNavigation v-if="navigation" />
</template>

<script setup>
import init from '../initialize/mobile'
provide('mobile', init())

const { sidebar } = inject('service')
sidebar.is ??= resolveComponent('AppMobileDrawerMenu')

const { config } = useAttrs()
const { header = true, navigation = true } = config.mobile
provide('config', config)

const { status, data } = await useFetch('/api/headers')

if (status.value == 'success')
    sidebar.props = { menu: data.value }
else throw createError(error.value)
</script>

<style lang="scss">
.p-dialog-mask.p-dialog-bottom {

    .p-dialog {
        @apply w-screen rtl;

        .p-dialog-header {
            @apply hidden;
        }

        .p-dialog-content {
            @apply p-0 bg-transparent rounded-none;
        }
    }

}
</style>