<style lang="scss">
    .theme-navtl {
        position: relative;
        height: 100%;
        width: 100%;

        .qg-page-left {
            z-index: auto;
            background-color: #fff;
        }
    }

</style>

<template>
    <div class="theme-navtl">
        <theme-header/>
        <div class="main-container" :class="{'hide-sidebar':!(subMenus && subMenus.length >0)}">
            <aside v-show="subMenus && subMenus.length >0" class="qg-page-left">
                <sidebar :menus="subMenus" class="sidebar-container"/>
            </aside>
            <breadcrumb v-show="crumbList.length > 0" id="breadcrumb-container" class="breadcrumb-container"/>
            <app-main/>
        </div>
    </div>
</template>

<script>
    import {AppMain, Sidebar, Breadcrumb} from '../../components';

    import ResizeMixin from '../../mixin/ResizeHandler';
    import {mapState} from 'vuex';
    import ThemeHeader from './components/header';

    export default {
        name: 'ThemeNavtl',
        components: {
            AppMain,
            ThemeHeader,
            Sidebar,
            Breadcrumb
        },
        mixins: [ResizeMixin],
        computed: {
            ...mapState({
                sidebar: state => state.app.sidebar,
                layout: state => state.app.layout,
                subMenus: state => state.permission.subMenus,
                crumbList: state => state.permission.crumbList
            }),
            classObj() {
                return {
                    hideSidebar: !this.sidebar.opened,
                    openSidebar: this.sidebar.opened,
                    withoutAnimation: this.sidebar.withoutAnimation
                };
            }
        },
        watch: {
            subMenus(val) {
                console.log('subMenus change', val);
            }
        },
        methods: {
            handleClickOutside() {
                this.$store.dispatch('app/closeSideBar', {withoutAnimation: false});
            }
        }
    };
</script>