<template>
    <header class="header-mobile">
        <div>
            <Button v-if="h.back" v-bind="btns.back.props" @click="$router.go(-1)" />
            <Button v-if="h.menu" v-bind="btns.menu.props" @click="sidebar.visible = true" />
            <h2 v-if="h.title" v-text="h.title" />
            <AppMobileSearchBox v-if="h.search" />
            <span />
            <template v-for="(opt, i) in h.options" :key="i">
                <Button v-bind="opt.props" @click="opt.click" />
            </template>
        </div>
        <AppMobileToolbar v-if="h.toolbar" />
    </header>
</template>

<script setup>
const { btns, navigation } = inject('mobile')
const { sidebar } = inject('service')
const { mobile } = inject('config')
const h = computed(() => mobile.header)
</script>

<style lang="scss">
.header-mobile {
    box-shadow: 0px 2px 20px #004b8224;
    @apply w-full h-max bg-white shadow border-b pl-3 flex flex-col sticky top-0 z-10;

    &>div {
        @apply h-[3.3rem] flex items-center;

        &>button {
            @apply flex items-center text-[#292D32] shrink-0;

            .p-button-icon {
                @apply text-2xl;
            }
        }

        &>h2{
            @apply text-[#333333] text-sm font-medium font-vazir;
        }

        &>span {
            @apply mr-auto;
        }


    }
}
</style>