<script setup>
import LayoutHeader from '../../components/LayoutHeader/index.vue';
import LayoutSider from '../../components/LayoutSider/index.vue';
</script>

<template>
    <a-layout style="height: 100vh">
        <a-layout-header id="layout-header" style="height: 60px">
            <LayoutHeader></LayoutHeader>
        </a-layout-header>
        <a-layout class="mt-[4px] h-[calc(100vh-64px)]">
            <a-layout-sider>
                <LayoutSider></LayoutSider>
            </a-layout-sider>
            <a-layout-content>
                <transition name="fade">
                    <router-view></router-view>
                </transition>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<style lang="scss" scoped>
#layout-header {
    box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
    position: relative;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    position: absolute;
}
</style>
