sidebar toggle with js

how to use side bar menu toggle with java script

for HTML

<div id="sidebar">
  <div class="toggle-btn" onClick="toggleSidebar()">
   <span></span>
   <span></span>
   <span></span>
  </div>
 <ul>
  <li><a href="#" >Home</a></li>
  <li><a href="#" >About</a></li>
  <li><a href="#" >Service</a></li>
  <li><a href="#" >Product</a></li>
  <li><a href="#" >Contact</a></li>
 </ul>
</div>

for CSS

#sidebar{
	position:fixed; width:250px; height:100%; background-color:#000;
	left:-250px;  transition:1s;
	
	}
#sidebar.active { left:0px;}
#sidebar ul li {
	list-style:none; padding:15px 10px; border-bottom:1px solid 
        rgba(255,255,255,0.2);
	}
#sidebar ul li a { color:#fff; text-decoration:none;}

#sidebar .toggle-btn {
	position:absolute; left:265px; top:10px; cursor:pointer;   
	}
#sidebar .toggle-btn span {
	display:block; width:30px; height:5px; background:#333; 
        margin:5px 0px;  
	}

 

for JavaScript

 

   function toggleSidebar(){
	document.getElementById("sidebar").classList.toggle('active');

	}