JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button class="burger">
          <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
        </button>

SCSS

.burger {
    background-color: transparent;
    border: none;
    svg {
        fill: #FFFFFF;
    }
}
.menu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: $color-primary;
    z-index: -1;
    transition: all .2s ease-in;
    transform: translateY(-100%);
}

JavaScript

let button = document.querySelector('.burger');
let menu = document.querySelector('.menu');
button.addEventListener('click', function () {
    if (menu.style.transform == "translateY(-100%)") {
        menu.style.transform = "translateY(0)";
    } else {
        menu.style.transform = "translateY(-100%)";
    }
})