JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-hidden" >
  <ul>
    <li><a href="#" class="anchor-scroll active">Retail Registration</a></li>
    <li><a href="#" class="anchor-scroll">Wholesale Registration</a></li>
    <li><a href="#" class="anchor-scroll">Mens Clothing</a></li>
    <li><a href="#" class="anchor-scroll">Women</a></li>
    <li><a href="#" class="anchor-scroll">Private Label</a></li>
    <li><a href="#" class="anchor-scroll">Lookbook</a></li>
    <li><a href="#" class="anchor-scroll">Catalogue</a></li>
    <li><a href="#" class="anchor-scroll">Contact Us</a></li>
  </ul>
</div> 

<nav>
  <button id="menu-ic">
    <hr id="l1">
    <hr id="l2">
    <hr id="l3">
  </button>
</nav>

CSS

#menu-hidden {
  position: absolute;
  width: 300px;
  height: 1200px;
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  opacity: 0.98;
  top: -120px;
  left: -300px;
  z-index: 550;
  transition: all 1s ease; }
#menu-hidden ul {
  position: absolute;
  top: 15%; }
#menu-hidden ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 120px;
  float: right;
  list-style: none;
  text-align: right; }
#menu-hidden ul li a {
  font-family: sans-serif;
  color: #2c2c2c;
  font-size: 18px;
  text-transform: uppercase; }
#menu-hidden ul li a:hover {
  color: #d6222f;
  transition: all 0.5s ease; }

button:focus {
  outline: none;
}
nav {
  position: relative;
  display: inline-block;
  float: left; }
#menu-ic {
  background: none;
  border: none;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  top: 30px;
  left: 30px;
  z-index: 600; }
#menu-ic hr {
  height: 2px;
  background-color: #000;
  position: absolute;
  border: none;
  transition: all 1s ease;
  z-index: 500;
}
#l1 {
  width: 20px;
  top: 0; }
#l2 {
  width: 24px;
  top: 8px; }
#l3 {
  width: 22px;
  top: 16px; }

JavaScript

var isHidden = true;
document.getElementById('menu-ic').addEventListener('click', function(evt) {
  if(isHidden){
	  document.getElementById('menu-hidden').style.left = '0';
	  document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
	  document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
	  document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
    }else{
				document.getElementById('menu-hidden').style.left = '-300px';
				document.getElementById('l1').style.cssText = 'width:20px;';
				document.getElementById('l2').style.cssText = 'width:24px;';
				document.getElementById('l3').style.cssText = 'width:22px;';
	
    }
    isHidden = !isHidden
});