Cacher is the code snippet organizer for pro developers

JS CODE
=======

    //init menu
    var menu = {
        nav: $('.page-header__right-part'),
        openMenuBtn: $('.menu-action'),
        droppBtn: $('.dropper-nav'),
        droppContent: $('.dropdown-content'),
        flag: true,

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

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

                    if( menu.openMenuBtn.hasClass('menu-action_init') ) {
                        menu.droppBtn.removeClass('rotateEl');
                    }
                    menu.droppContent.slideUp();

                    setTimeout(function () {
                        menu.flag = true;
                    }, 300);
                }
            });

            this.droppBtn.on('click', function () {
                if (window.innerWidth <= 767) {
                    $(this).toggleClass('rotateEl');
                    var item = $(this).next('.dropdown-content');
                    item.slideToggle();
                }
            });
        },
        init: function () {
            this.menuAction();
        },
        destroy: function () {
            this.nav.removeAttr('style');
            $('body').removeClass('disabled-scroll');
            this.openMenuBtn.removeClass('menu-action_init');
            this.droppBtn.removeClass('rotateEl');
            this.droppContent.removeAttr('style');
        }
    };
    
    
ON INIT
-------
    //init on load
    window.onload = function() {
        menu.init();
    }  
    
 
ON RESIZE
---------
 
     $(window).resize(function () {
        if (window.innerWidth >= 768) {
            menu.destroy();
        }
    });
    
    
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: 25px;
  height: 2px;
  left: 50%;
  top: 50%;
  background-color: $white;
  position: absolute;
  transition: 0.4s;
  transform: translate(-50%, -50%);

  &:first-child {
    top: 1px;
  }
  &:last-child {
    top: auto;
    bottom: 0;
  }
}

//active state
.menu-action_init .menu-action__item {
  &:first-child {
    transform: rotate(-45deg) translate(-50%, 0%);
  }
  &:nth-child(2n) {
    opacity: 0;
  }
  &:last-child {
    transform: rotate(45deg) translate(-50%, 0%);
  }
}

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

.disabled-scroll {
  overflow: hidden;
  height: 100vh;
}