<template>
    <div class="templatemain" :class="{'hide-menu': !isMenuVisible}">
        <jarch-header :initialsSystem="initialsSystem" :descriptionSystem="descriptionSystem" :logoMenu="logoMenu"/>
        <jarch-menu :login="login" :nameUser="nameUser" :lastAccess="lastAccess" :menu="menu" :title="titleMenu"
            :subTitle1="subTitle1Menu" :subTitle2="subTitle2Menu" :subTitle3="subTitle3Menu"/>
        <jarch-content :effect="effect"/>
        <jarch-footer/>
    </div>
</template>

<script>
    import jarchHeader from "./TemplateHeader"
    import jarchMenu from "./TemplateMenu"
    import jarchContent from "./TempleteContent"
    import jarchFooter from "./TemplateFooter"

    import { mapState } from 'vuex'

    export default {
        name: "TemplateMain",
        components: {jarchHeader, jarchMenu, jarchContent, jarchFooter},
        props: {
            initialsSystem: { type: String, required: true },
            descriptionSystem: { type: String, required: true },
            login: { type: String, required: true },
            nameUser: { type: String, required: true },
            lastAccess: { type: String, required: false },
            titleMenu: {type: String, required: false},
            subTitle1Menu: {type: String, required: false},
            subTitle2Menu: {type: String, required: false},
            subTitle3Menu: {type: String, required: false},
            menu: {type: Array, required: true},
            logoMenu: {},
            effect: {}
        },
        computed: mapState(['isMenuVisible'])
    }
</script>

<style lang="scss">
    body {
        margin: 0;
    }

    .templatemain {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        width: 100vw;
        height: 100vh;

        display: grid;
        grid-template-columns: 180px 1fr;
        grid-template-rows: 60px 1fr 40px;
        grid-template-areas:
                "header header"
                "menu content"
                "menu footer";
    }

    .templatemain.hide-menu {
        grid-template-columns: 1fr;
        grid-template-areas:
                "header"
                "content"
                "footer";

        aside.menu {
            display: none;
        }
    }
</style>
