unity/resources/js/user/layouts/parts/Sidebar.vue

<template>
    <div class="app-sidebar sidebar-shadow bg-plum-plate text-lighter" @mouseover="toggleSidebarHover('add','closed-sidebar-open')" @mouseleave="toggleSidebarHover('remove','closed-sidebar-open')">
        <div class="app-header__logo">
            <div class="text-white m-2">
                <router-link  
                    :to="'/'" 
                    class="btn-link"
                >
                    <div class="logo-src" :style='{ background: "url(" + share_url + "logo-white.png" + ")" }'></div>
                </router-link>
            </div>
            <div class="header__pane ml-auto">
                <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" v-bind:class="{ 'is-active' : is_open }" @click="toggleBodyClass('closed-sidebar')">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>
        <div class="app-sidebar-content">
            <vue-perfect-scrollbar v-if="menu[0]" class="app-sidebar-scroll" v-once>
                <sidebar-menu
                    showOneChild 
                    :menu="menu"
                    @item-click="onItemClick"
                />
            </vue-perfect-scrollbar>
        </div>
    </div>
</template>


<script>
    import { SidebarMenu } from 'vue-sidebar-menu'
    import VuePerfectScrollbar from 'vue-perfect-scrollbar'

    export default {
        props: {
            permission_list: Array

        },
        components: {
            SidebarMenu,
            VuePerfectScrollbar
        },
        data() {
            return {
                is_open: false,
                sidebar_active: false,
                menu: [],
                collapsed: true,
                window_width: 0,
                share_url: ENV.SHARE_URL,
                site_short_title: Constants.site.short_title,
            }
        },
        methods: {
            onItemClick(event, item) {
                let vm = this;
                if (!item.child) {
                    const el = document.body;
                    el.classList.remove('closed-sidebar-open');

                    const bu = document.getElementsByClassName('close-sidebar-btn')[0];
                    bu.classList.remove('is-active');
                }
            },
            toggleBodyClass(className) {
                let vm = this;
                const el = document.body;
                vm.is_open = !vm.is_open;

                if (vm.is_open) {
                    el.classList.add(className);
                } else {
                    el.classList.remove(className);
                }
            },
            toggleSidebarHover(add, className) {
                let vm = this;
                const el = document.body;
                vm.sidebar_active = !vm.sidebar_active;
                vm.window_width = document.documentElement.clientWidth;
                if (vm.window_width > '992') {
                    if (add === 'add') {
                        el.classList.add(className);
                    } else {
                        el.classList.remove(className);
                    }
                }
            },
            getWindowWidth() {
                let vm = this;
                const el = document.body;
                vm.window_width = document.documentElement.clientWidth;
                el.classList.add('closed-sidebar', 'closed-sidebar-md');
            },
            loadMenu() {
                let vm = this;
                vm.menu = NavigationAccess.menuDefine(vm.permission_list);
            }
        },
        created() {
            let vm = this;
            vm.loadMenu();
        },
        mounted() {
            let vm = this;
            vm.$nextTick(function () {
                window.addEventListener('resize', vm.getWindowWidth);
                //Init
                vm.getWindowWidth()
            })
        },
        beforeDestroy() {
            let vm = this;
            window.removeEventListener('resize', vm.getWindowWidth);
        }
    }
</script>