JSFiddle - React, Tailwind, and code Playground

HTML

<header id="ovlay">
            <span class="nav-toggle eq">&equiv;</span>
            <nav class="main-navigation">
                <span class="nav-toggle">&times;</span>
                <ul class="menu">
                    <li><a href="#about" class="slide-section">About</a></li>
                    <li><a href="#works" class="slide-section">Works and stuff</a></li>
                    <li><a href="#contact" class="slide-section">Contact</a></li>
                </ul>
            </nav>
        </header>

CSS

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
          
  .main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  /*top left corner*/
  width: 300px;
  /*100% if it's covering whole screen*/
  height: 100%;
  background: #16174f;
  /*opacity: 0.95;*/
  text-align: left;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  /*pushed left, 100% for right slide, translateY for bottom*/
  -webkit-transition: -webkit-transform 0.2s ease;
          transition: transform 0.2s ease; }

.main-navigation.open {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  /*just telling to be in normal position*/
  box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4); }

.nav-toggle, .main-navigation > .nav-toggle {
  position: absolute;
  top: 30px;
  cursor: pointer; }

.main-navigation > .nav-toggle {
  left: 5%;
  top: 25px;
  font-size: 170%;
  color: #fccdd3;
  -webkit-transition: 0.1s ease;
          transition: 0.1s ease; }

JavaScript

$(document).ready(function(){
    $('.nav-toggle').on('click', function(){
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
    });
});

$(document).click(function(){
    if($('.nav-toggle').hasClass('open')) {
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
    }
});