JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<nav>
<i class="material-icons" id="hamburger">menu</i>
<span id="brand">Code100</span>
<ul>
  <li>fdsfdsfdsf</li>
    <li>fdsfdsfdsf</li>
      <li>fdsfdsfdsf</li>
        <li>fdsfdsfdsf</li>
          <li>fdsfdsfdsf</li>
</ul>

<div id="aside-menu-wrapper">
  <aside>
    <ul>
      <li><i class="material-icons" id="dashboard">dashboard</i></li>
        <li><i class="material-icons" id="school">school</i></li>
          <li><i class="material-icons" id="forum">forum</i></li>
            <li><i class="material-icons" id="market">shopping_basket</i></li>
            <li><i class="material-icons" id="help">school</i></li>
    </ul>
  </aside>
</div>
</nav>

SCSS

@import "https://fonts.googleapis.com/icon?family=Material+Icons";
nav{
    position:relative;
    width:100%;
  z-index:999999;

  background:white;
  display:flex;
  padding:10px 0 10px 0;
  ul:not(aside<ul){
    display:flex;
    justify-content:space-around;
    width:100%;
  }
  #brand{
    margin-left:10px;
  }
}
#aside-menu-wrapper{
  position:absolute;
  top:0;
  left:0;
  z-index:99;
  width:0vw;
  height:100vh;
  background:rgba(0,0,0,0.8);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.4s, width 0.2s, clip-path 0.3s linear;
clip-path: circle(50.0% at 0% 0%);
}
.active#aside-menu-wrapper{
 visibility: visible;
  opacity: 1;
width:70vw;
  clip-path: circle(50.0% at 10% 10%);
}
aside{
  height:calc(50% - 15px);
}
aside ul{
  margin-top:15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:100%;
}
aside li{
margin-left:15px;
.material-icons{
  font-size:2em;
  transition .4s all;
   transform:scale(1);
   
   &:hover{
  transform:scale(1.2);
}
}
}
#dashboard{
  color:#1abc9c;
}
#school{
  color:#e74c3c;
}
#forum{
  color:#8e44ad;
}
#market{
  color:#f39c12;
}
#help{
  color:#3498db;
}

JavaScript

function removeActive(){
document.getElementById('aside-menu-wrapper').classList.remove('active');
document.body.removeEventListener('click', removeActive);
}
document.querySelector('#hamburger').addEventListener('click', function(e){
document.getElementById('aside-menu-wrapper').classList.add('active');
//document.body.addEventListener('click', removeActive);
})