SCSS/Vanilla JS Hamburger Navigation Button

menu-burger.html

<button class="menu-burger">
  <div class="menu-burger__bars">
    <div class="menu-burger__bar menu-burger__bar--1"></div>
    <div class="menu-burger__bar menu-burger__bar--2"></div>
    <div class="menu-burger__bar menu-burger__bar--3"></div>
  </div>
</button>

menu-burger.scss

.menu-burger {
  appearance: none;
  background: 0 0;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  outline: none;
  position: relative;
  transition: ease all 450ms;
  vertical-align: middle;
  width: 50px;
  z-index: 80;

  &:focus {
    outline: 0;
  }

  &__bar,
  &__bars {
    position: absolute;
  }

  &__bars {
    height: 18px;
    left: 50%;
    margin-left: -10px;
    margin-top: -9px;
    top: 50%;
    transition: transform .4s;
    width: 20px;
    will-change: transform;
  }

  &__bar {
    background: #231f20;
    display: block;
    height: 2px;
    transition: transform .4s, margin .4s, opacity .4s, background .3s;
    width: 100%;

    &--2 {
      transform: translateY(7px);
    }

    &--3 {
      transform: translateY(14px);
    }
  }


  &:hover {
    .menu-burger__bar {
      background: #a30008;
    }
  }

  &--active {
    opacity: 0;

    .menu-burger__bars {
      transform: translateY(7px);
    }

    .menu-burger__bar--1 {
      transform: rotate(45deg);
    }

    .menu-burger__bar--2 {
      opacity: 0;
    }

    .menu-burger__bar--3 {
      transform: rotate(-45deg);
    }
  }
}

menuBurger.js

document.addEventListener("DOMContentLoaded", function() {
  const menuBurger =  document.querySelector('.menu-burger');
  const siteBody = document.getElementsByTagName('body')[0];

  function menuOpen() {
    siteBody.classList.add('menu-open');
  }

  function menuClose() {
    siteBody.classList.remove('menu-open');
  }

  function menuClick() {
    if (siteBody.classList.contains('menu-open')) {
      menuClose();
    } else {
      menuOpen();
    }
  }

  menuBurger.addEventListener('click', menuClick);
});