<script setup>
import {NLayout, NLayoutSider, NConfigProvider, NLayoutHeader, ruRU, dateRuRU, darkTheme} from "naive-ui";
import SideMenu from "./Components/SideMenu.vue";
import AppHeader from "./Components/AppHeader.vue";

const themeOverrides = {
    Modal: {
        peers: {
            Dialog: {
                borderRadius: '8px'
            },
            Card: {
                borderRadius: '8px'
            },
        }
    }
}
</script>

<template>
    <NConfigProvider :theme="darkTheme" :theme-overrides="themeOverrides" :locale="ruRU" :date-locale="dateRuRU">
        <NLayout position="absolute">

            <NLayoutHeader style="height: 48px;" bordered>
                <AppHeader>
                    <template #headerExtra>
                        <slot name="headerExtra" />
                    </template>
                </AppHeader>
            </NLayoutHeader>

            <NLayout has-sider position="absolute" class="top-12!" content-class="relative" :native-scrollbar="false">
<!--                <NLayoutSider-->
<!--                    :native-scrollbar="false"-->
<!--                    width="290"-->
<!--                    class="h-[100vh-48px]!"-->
<!--                >-->
<!--                    <SideMenu />-->
<!--                </NLayoutSider>-->

                <NLayout>
                    <div>
                        <slot name="header" />
                    </div>
                    <slot />
                </NLayout>
            </NLayout>

        </NLayout>
    </NConfigProvider>
</template>

<style scoped>

</style>
