<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <MalioSidebar
                v-model="ui.sidebarCollapsed"
                :sections="translatedSections"
            >
                <template #logo>
                    <img src="/LOGO_MALIO.png" alt="Malio"/>
                </template>
                <template #logo-collapsed>
                    <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio"/>
                </template>
            </MalioSidebar>

            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                <main
                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
                    <div aria-hidden="true"
                         class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12"/>
                    <slot/>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const {t} = useI18n()
const ui = useUiStore()
const {sections} = useSidebar()
const route = useRoute()

const translatedSections = computed(() =>
    sections.value.map(section => ({
        label: t(section.label),
        icon: section.icon,
        items: section.items.map(item => ({
            label: t(item.label),
            to: item.to,
        })),
    }))
)

watch(() => route.path, () => {
    ui.closeMobileSidebar()
})

useHead({
    titleTemplate: (title) => title || 'Coltura',
})
</script>
