JSFiddle - React, Tailwind, and code Playground

by GioLogist

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-side">
  <nav>
    <button class="header-side__hamburger header-side__hamburger--spin" type="button">
      <span class="header-side__hamburger-box">
        <span class="header-side__hamburger-inner"></span>
      </span>
    </button>
    <div class="header-side__bottom-left">
      <a href="#"><i class="fa fa-comments"></i></a>
      <a href="#"><i class="fa fa-shopping-cart"></i></a>
    </div>
  </nav>
  <nav class="header-side__inner">
    <div class="header-side__inner-col1">
      <ul class="header-side__inner-mainlinks">
        <li><a href="#">Google</a></li>
        <li><a href="#">Apps &amp; Games</a></li>
        <li><a href="#">Accessories &amp; Toys</a></li>
        <li><a href="#">Photo &amp; Fitness</a></li>
        <li><a href="#">Movies &amp; Music</a></li>
        <li><a href="#">Transport</a></li>
        <li><a href="#">Security</a></li>
      </ul>
      <ul class="header-side__inner-normallinks">
        <li><a href="#">Terms &amp; Conditions</a></li>
        <li><a href="#">Newsletter</a></li>
        <li><a href="#">About AndroidCentrl</a></li>
      </ul>
    </div>
    <div class="header-side__inner-col2">
      <h3>Other Categories</h3>
      <ul class="header-side__inner-normallinks">
        <li><a href="#">Forums</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Apps</a></li>
        <li><a href="#">Virtual Reality</a></li>
        <li><a href="#">Help &amp; How To</a></li>
        <li><a href="#">Questions &amp; Answers</a></li>
        <li><a href="#">Contests</a></li>
        <li><a href="#">Podcasts</a></li>
        <li><a href="#">Wallpapers</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Shop Accessories</a></li>
      </ul>
    </div>
    <div class="header-side__inner-col3">
      <ul class="header-side__social">
 ...

SCSS

$header-side-bg-color: #1bc536 !default;
$header-side-width: 70px !default;
$header-side-width-active: 800px !default;
$header-side-height: 471px !default;
$header-side-header-side__hamburger-color: #fff !default;
$header-side-header-side__hamburger-color-active: #128224 !default;
$header-side-nav-bg-color: $header-side-bg-color !default;
$header-side-nav-main-font-size: 22px !default;
$header-side-nav-main-line-height: 1.4 !default;
$header-side-nav-font-size: 16px !default;
$header-side-nav-line-height: 1.6 !default;
$header-side-nav-text-color: $header-side-header-side__hamburger-color-active !default;
.header-side {
  width: $header-side-width-active;
  max-width: 100%;
  height: $header-side-height;
  position: relative;
  overflow: hidden;
  nav:first-child {
    box-sizing: border-box;
    padding: 25px;
    text-align: center;
    width: $header-side-width;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: $header-side-bg-color;
    z-index: 21;
    .header-side__bottom-left {
      text-align: left;
      position: absolute;
      bottom: 0;
      font-size: 25px;
      a {
        color: #fff;
        &:hover {
          color: #128224;
        }
      }
      i {
        margin-bottom: 30px;
      }
    }
  }
  button {
    outline: 0;
  }
  .header-side__hamburger {
    margin: 6px 0 0 0;
    padding: 0;
  }
  .header-side__hamburger-box {
    width: 20px;
  }
  .header-side__hamburger-inner,
  .header-side__hamburger-inner:after,
  .header-side__hamburger-inner:before {
    width: 20px;
    height: 2px;
    background-color: $header-side-header-side__hamburger-color;
  }
  .header-side__hamburger-inner:before {
    top: -6px;
  }
  .header-side__hamburger-inner:after {
    bottom: -6px;
  }
  .header-side__hamburger--is-active .header-side__hamburger-inner,
  .header-side__hamburger--is-active .header-side__hamburger-inner:after,
  .header-side__hamburger--is-active .header-side__hamburger-inner:before {
   ...

JavaScript

$('.header-side .header-side__hamburger').click(function() {

  // switch it up
  $(this).toggleClass('header-side__hamburger--is-active');
  $(this).parent().parent().toggleClass('header-side--active');

  // we active or na?
  is_active = $(this).hasClass('is-active');

  if (is_active) {
    // we active 
  } else {
    // we not active
  }


});