JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

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>
    </body>

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: rgba(219, 219, 224, 0.27);
    }

    #menu {
      float: right
    }
    
    nav {
      width: 250px;
      height: 100%;
      position: fixed;
      right: 0;
      /* This trasform moves the drawer off canvas. */
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
      /* Optionally, we animate the drawer. */
      transition: transform 0.3s ease;
    }
    nav.open {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

JavaScript

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');
});