<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:05:44
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-09 15:50:52
 * @FilePath: \admin_system\src\layout\Index.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <el-container id="layout-container">
        <el-header id="layout-header">
            <LayoutHeader />
        </el-header>
        <el-container id="layout-container-down">
            <el-aside :width="asideWidth" id="layout-aside">
                <LayoutAside />
            </el-aside>
            <el-main id="layout-main">
                <LayoutMain />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import LayoutAside from "./components/Aside.vue";
import LayoutHeader from "./components/Header.vue";
import LayoutMain from "./components/Main.vue";

export default {
    name: "layoutPage",
    components: {
        LayoutAside, LayoutHeader, LayoutMain,
    },
    computed: {
        asideWidth()
        {
            const collapse = this.$store.state.app.asideBarCollapse;

            return collapse === true ? "65px" : "175px";
        }
    }
};
</script>

<style scoped>
#layout-container {
    height: 100vh;
    max-height: 100vh;
    /* overflow: hiddens; */
}

#layout-aside {
    /* width: 175px; */
    background-color: #223142;
    overflow-x: hidden;
}

#layout-header {
    height: 50px;
    /* background-color: #77bc99; */
    padding: 0px;
    flex-grow: 0;
}

#layout-main {
    background-color: #ddd;
    /* height: 0; */
    /* flex-grow: 1; */
}

#layout-container-down {
    height: calc(100vh - 50px);
    /* max-height: calc(100vh - 50px); */

}
</style>