JS dropped adaptive menu

JS dropped adaptive menu

JS CODE
=======

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

//init menu
let menu = {
    nav: $('.main-nav'),
    openMenuBtn: $('.menu-action'),
    flag: true,

    menuAction() {
        this.openMenuBtn.on('click', function H() {
            if(menu.flag) {
                menu.flag = false;

                menu.nav.slideToggle();
                menu.openMenuBtn.toggleClass('menu-action_init');
                $('body, html').toggleClass('disabled-scroll');

                setTimeout(function() {
                    menu.flag = true;
                }, 300);
            }
        });
    },
    init: function H() {
        this.menuAction();
    },
    destroy: function H() {
        this.nav.removeAttr('style');
        $('body, html').removeClass('disabled-scroll');
        this.openMenuBtn.removeClass('menu-action_init');
    }
};


//init on load
menu.init();

//on resize
$(window).resize(function H() {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);

    if($(window).innerWidth() > 768) {
        menu.destroy();
        alert($(window).innerWidth());
    }
});
    
    
HTML MARKUP
===========

<div class="menu-action">
   <span class="menu-action__item"></span>
   <span class="menu-action__item"></span>
   <span class="menu-action__item"></span>
</div>
    
    
SCSS STYLES 
===========

//default state
.flex-container {
    display: flex;
    align-items: center;

    @include max-w($screen-md) {
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        padding: 50px 20px;
        overflow-y: auto;
    }
}

.menu-action {
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 6;
    display: none;
    cursor: pointer;

    @include max-w($screen-md) {
        display: block;
    }
}
.menu-action__item {
    display: block;
    width: 100%;
    height: 2px;
    background-color: $theme;
    position: absolute;
    transition: .4s;

    &:first-child {
        top: calc(50% - 1px);
        transform: translateY(-10px);
    }

    &:nth-child(2) {
        top: calc(50% - 1px);
    }

    &:last-child {
        bottom: calc(50% - 1px);
        transform: translateY(10px);
    }
}

//active state
.menu-action_init {
    overflow: hidden;

    .menu-action__item {
        &:first-child {
            top: calc(50% - 1px);
            transform: rotate(-45deg);
            background-color: $white;
        }
        &:nth-child(2n) {
            opacity: 0;
        }
        &:last-child {
            bottom: calc(50% - 1px);
            transform: rotate(45deg);
            background-color: $white;
        }
    }
}

.rotateEl {
    transform: rotate(180deg);
}

.disabled-scroll {
    overflow: hidden;
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}