JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<nav id="drawer" class="dark_blue">


<ul>
<a href="http://www.ufrgs.br/termisul/">Home</a>
<a href="http://www.ufrgs.br/termisul/termisul/">Termisul</a>
<a href="http://www.ufrgs.br/termisul/equipe-termisul/">Equipe</a>
<a href="http://www.ufrgs.br/termisul/contato/">Contato</a>
</ul>


</nav>

<main class="light_blue">
  <a id="menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
    </svg>
  </a>
</main>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
  }
  a#menu svg {
    width: 40px;
    fill: #000;
  }
  nav, main {
    padding: 1em;
    box-sizing: border-box;
  }
  main {
    width: 100%;
    height: 100%;
  }

  #drawer {
     background-color: white;
  }

  #menu {
    float: left;
  }

  nav {
    width: 250px;
    height: 100%;
    left:0;
    position: fixed;
    -webkit-transform: translate(0, 0);
    transform: translate(-250px, 0);
    transition: transform 0.3s ease;
  }
  nav.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

JavaScript

/*
   * Open the drawer when the menu ison is clicked.
   */
  var menu = document.querySelector('#menu');
  var main = document.querySelector('main');
  var drawer = document.querySelector('#drawer');

  menu.addEventListener('click', function(e) {
    drawer.classList.toggle('open');
    e.stopPropagation();
  });
  main.addEventListener('click', function() {
    drawer.classList.remove('open');
  });