JSFiddle - React, Tailwind, and code Playground

by Andrejs Gubars

HTML

<button class="mob-btn">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</button>

SCSS

.mob-btn {
  width: 45px;
  background: transparent;
  border: none;
  float: right;
  height: 55px;
  right: 20px;
  top: 20px;
  position: absolute;
  padding: 0;
  &:focus {
    outline: none;
  }
  @media (min-width: 768px) {
    display: none;
  }
  &.fixed {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 10;
    div {
      position: relative;
      &.line {
        background: blue;
        position: absolute;
        margin-top: 0px;
        &:nth-of-type(1) {
          transform: rotate(135deg);
        }
        &:nth-of-type(2) {
        left: -55px;
          opacity: 0;
        }
        &:nth-of-type(3) {
          transform: rotate(-135deg);
        }
      }
    }
  }
  div {
    transition: left 500ms, opacity 500ms, transform 500ms;
    &.line {
      width: 100%;
      margin-top: 6px;
      height: 2px;
      background: black;
      &:nth-of-type(2) {
        left: 0;
        opacity: 1;
      }
    }
  }
}

JavaScript

document.ready(function() {
var navBtn = $('.mob-btn');
var animObj = {
  speed: 600,
  easing: 'ease'
};

navBtn.on('click',function() {

  var menu = $('.menu-nav');

  menu.toggleClass('active');

  if(menu.hasClass('active')) {
    menu.animate({
      'width': $(document).width(),
      'height': $(window).height(),
      complete: function() {
        console.log('finished');
      }
    },animObj.speed/2);
  } else {
    menu.animate({
      'width': 0,
      'height': 0,
      complete: function() {
        console.log('finished');
      }
    },animObj.speed/4);
  }


});
});