JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" id="wrap">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
  </div>
  
  <div class="menu" id="menu">
    <div class="button" id="button">Menu</div>
    <div class="menu_close"></div>
    <ul>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ul>
  </div>

CSS

*{
  margin: 0;
  padding: 0;
}

.wrap{
  width: 100%;
  position: relative;
  transition: transform 1000ms ease-in-out; 
}
.item{
  width: 100%;
  height: 100vh;
}
.item1{
  background: black;
}
.item2{
  background: blue;
}
.item3{
  background: red;
}
.item4{
  background: green;
}
.item5{
  background: pink;
}

.button{
  position: fixed;
  padding: 5px;
  background: #fff;
  top: 10px;
  right: 10px;
  cursor: pointer
}

.menu{
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  background: #fff;
  width: 50vw;
  height: 100vh;
  background: gray;
  text-align: center;
  transition: transform 1000ms ease-in-out; 
}
.menu ul li{
  margin-bottom: 15px;
  list-style: none;
}

#menu.open {
  transform: translateX(0);
}

#wrap.sidebarOpen {
  transform: translateX(-50%);
}

#button {
  position: fixed;
  transform: translateX(-100%);
  left: -5px;
  display: inline-block;
  width: auto;
  right: auto;
}

.menuMoveLeft{
  animation-name: menuMoveLeft;
  animation-duration: 1000ms;
  animation-fill-mode: forwards;
}

.wrapMoveLeft{
  animation-name: wrapMoveLeft;
  animation-duration: 1000ms;
  animation-fill-mode: forwards;
}

@keyframes menuMoveLeft {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(0);
  }
}

@keyframes wrapMoveLeft {
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-50%);
  }
}

JavaScript

var button = document.getElementById('button');
var menu = document.getElementById('menu');
var wrap = document.getElementById('wrap');


button.addEventListener('click', function() {
  menu.classList.toggle("open");  
  wrap.classList.toggle("sidebarOpen");
});