unity/resources/js/admin/layouts/parts/Header.vue

<template>
    <div :class="headerbg" class="app-header header-shadow bg-plum-plate text-lighter">
        <div class="app-header__content">
            <div class="app-header-right">
                <HeaderUserArea 
                    :admin_detail="admin_detail"
                />
            </div>
        </div>
        <div class="app-header__mobile-menu">
            <div>
                <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" :class="{ 'is-active' : isOpen }" @click="toggleMobile('closed-sidebar-open')">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>
        <div class="app-header__menu">
            <span>
                <b-button class="btn-icon btn-icon-only" variant="primary" size="sm" :class="{ 'active' : isOpenMobileMenu }" @click="toggleMobile2('header-menu-open')">
                    <div class="btn-icon-wrapper">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                </b-button>
            </span>
        </div>
    </div>
</template>

<script>
    import HeaderUserArea from './HeaderUserArea';

    export default {
        name: "Header",
        components: {
            HeaderUserArea,
        },

        data() {
            return {
                isOpen: false,
                isOpenMobileMenu: false,
            }
        },
        props: {
            headerbg: String,
            admin_detail: Object 
        },
        methods: {
            toggleMobile(className) {
                let vm = this;
                
                const bu = document.getElementsByClassName('close-sidebar-btn')[0];
                const el = document.body;

                if (bu.classList.contains('is-active')) {
                    vm.isOpen = false;
                    bu.classList.remove('is-active');
                }
                else {
                    vm.isOpen = true;
                    bu.classList.add('is-active');
                }

                if (vm.isOpen) {
                    el.classList.add(className);
                } else {
                    el.classList.remove(className);
                }
            },

            toggleMobile2(className) {
                let vm = this;
                const el = document.body;
                vm.isOpenMobileMenu = !vm.isOpenMobileMenu;

                if (vm.isOpenMobileMenu) {
                    el.classList.add(className);
                } else {
                    el.classList.remove(className);
                }
            },
        }
    };
</script>