<template>
    <div class="layout-container layout-default">
        <div class="layout-left">
            <layout-aside />
        </div>
        <div class="layout-center">
            <layout-menu />
        </div>
        <div class="layout-right">
            <layout-header />
            <layout-tabs />
            <layout-main />
            <layout-footer />
        </div>
    </div>
</template>

<script setup>
    import LayoutAside from './components/aside.vue';
    import LayoutFooter from './components/footer.vue';
    import LayoutHeader from './components/header.vue';
    import LayoutMain from './components/main.vue';
    import LayoutMenu from './components/menu.vue';
    import LayoutTabs from './components/tabs.vue';
</script>

<style lang="less" scoped>
    .layout-container {
        width: 100vw;
        height: 100vh;
        min-width: 1200px;
        background-color: @color-white-dark;
    }
    .layout-default {
        display: flex;
        .layout-left {
            display: flex;
            flex-direction: column;
            box-shadow: @layout-shadow;
            z-index: 9;
        }
        .layout-center {
            box-shadow: @layout-shadow;
            z-index: 9;
        }
        .layout-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
    }
</style>
