<template>
    <div>
        <!-- start: sidebar -->
        <aside class="sidebar-left">
            <div class="sidebar-header" style="background:#Fff;">
                <div @click="toggleCollapse" class="sidebar-toggle d-none d-md-flex" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
                    <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
                </div>
            </div>

            <div class="nano">
                <div class="nano-content">
                    <nav id="menu" class="nav-main" role="navigation">
                        <ul class="nav nav-main">
                            <menu-item v-for="item in menuItems"
                                       :key="item.Key"
                                       :label="item.Label"
                                       :kind="item.Kind"
                                       :url="item.Url"
                                       :iconClass="item.IconClass"
                                       :childs="item.Childs"></menu-item>

                        </ul>
                    </nav>

                    <hr class="separator" />

                    <div class="sidebar-widget widget-tasks">
                        <div class="widget-header">
                            <h6>Thông tin</h6>
                        </div>
                        <div class="widget-content">
                            <ul class="list-unstyled m-0">
                                <li><a href="#">Liên hệ</a></li>
                                <li><a href="#">Trợ giúp</a></li>
                                <li><a href="#">Góp ý</a></li>
                            </ul>
                        </div>
                    </div>

                </div>


            </div>
        </aside>
        <!-- end: sidebar -->



    </div>
</template>
<script>
    import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
    const MenuItem = () => import('./components/sidebar-menu-item.vue');
    import menuList from './data';
    export default {
        components: {
            'overlay-scrollbars': OverlayScrollbarsComponent,
            'menu-item': MenuItem
        },
        data() {
            return {
                isCollapse:false,
                menuItems: [],
                options: {
                    scrollbars: {
                        visibility: 'visible',
                        autoHide: "never",

                    },
                    className: "os-theme-dark",
                    nativeScrollbarsOverlaid: {
                        overflowBehavior: {
                            x: "hidden",
                            y: "visible-scroll"
                        }
                    }
                }
            };
        },
        mounted() {
            console.log(menuList);
            this.LoadMenuList();
        },
        methods: {
            toggleCollapse() {
                if (this.isCollapse) {
                    console.log('vao remove');
                    $('html').removeClass('sidebar-left-collapsed');
                    this.isCollapse = false;
                } else {
                    $('html').addClass('sidebar-left-collapsed');
                    this.isCollapse = true;
                }
            },
            LoadMenuList() {
                this.menuItems = menuList.data;
            }
        }
    };
</script>
<style scoped>
</style>