JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="mySidebar" class="sidebar">
	<div class="navigations">
		<span class="navigations-text">Navigation</span> <span class="closebtn" onclick="closeNav()" title="Fermer le menu">&times;</span>		
	</div>
  <br><br>
	<button class="dropdown-btn">Menu 1</button>
		<div class="dropdown-container">
		<a href="#" class="lien2">Link 1</a>
		<a href="#" class="lien2">Link 2</a>
		<a href="#" class="lien2">Link 3</a>
	</div>
	<button class="dropdown-btn">Menu 2</button>
		<div class="dropdown-container">
		<a href="#" class="lien2">Link 4</a>
		<a href="#" class="lien2">Link 5</a>
		<a href="#" class="lien2">Link 6</a>
		</div>
	<button class="dropdown-btn">Menu 3</button>
		<div class="dropdown-container">
		<a href="#" class="lien2">Link 7</a>
		<a href="#" class="lien2">Link 8</a>
		<a href="#" class="lien2">Link 9</a>
	</div>
	<a href="#contact" class="lien1">A propos</a>
	<a href="#contact" class="lien1">Contact</a>
</div>

<div id="main">
  <button class="openbtn" onclick="openNav()">☰ Menu</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>

</body>
</html>

CSS

/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 6; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 50px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* Position and style the close button (top right corner) */
.sidebar .navigations {
  float:left;
  border-bottom: 1px solid #575748;  
  margin:0;
  margin-bottom:20px;
  padding:0;
}

.sidebar .navigations-text {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 15px;
  color: #dfdfd0;  
  vertical-align: middle;
  text-transform: uppercase;
}

.sidebar .closebtn { 
 position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  margin-left:30px;
  color: white;
  cursor:pointer;
  vertical-align: middle;
}


/* The button used to open the sidebar */
.openbtn {
  font-size: 11px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 5px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

.lien1, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #dfdfd0;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.lien1:hover {background-color: #555;}

.lien2 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #8c0000;
  display: block;
  border: none;  
  text-align: left;
  cursor: pointer;
}
.lien2:hover {
  text-decoration: underline;
  color: #ff0000;
}

.dropdown-btn.active, .dropdown-btn:hover {
 ...

JavaScript

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}