<div class="menu-sidebar">
  <div class="sidebar-content">
    <button class="close-menu-button">
      <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
      </svg>
    </button>
  </div>
</div>
<div class="overlay"></div>
<div class="main-page">
  <div class="header">
    <button class="menu-button">
      <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
        <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
      </svg>
    </button>
  </div>
  <h1>Page Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
  </p>
</div>

body {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color: white;
  background: #111827;
}

body.sidebar-open {
  overflow: hidden;
}

.menu-sidebar {
  width: 500px;
  height: 100%;
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  background: #1f2937;
  transition: 0.5s ease translate;
  translate: -100% 0;
  will-change: transform;

  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
body.sidebar-open .menu-sidebar {
  translate: 0 0;
}

.sidebar-content {
  padding: 20px;
}

.main-page {
  padding: 50px;
  transition: 0.5s ease translate;
  will-change: transform;
}
body.sidebar-open .main-page {
  translate: 500px 0;
}

.overlay {
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: 0.5s ease opacity;
}
body.sidebar-open .overlay {
  opacity: 1;
  pointer-events: all;
}

.menu-button,
.close-menu-button {
  background: #475569;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 5px 8px;
  cursor: pointer;
}

.menu-button:hover,
.close-menu-button:hover {
  background: #374151;
}

@media (max-width: 768px) {
  .menu-sidebar {
    width: 100%;
  }
  body.sidebar-open .main-page {
    translate: 0 0;
  }
}

const menuButton = document.querySelector(".menu-button");
const overlay = document.querySelector(".overlay");
const closeMenuButton = document.querySelector(".close-menu-button");
menuButton.addEventListener("click", toggleMenu);
overlay.addEventListener("click", toggleMenu);
closeMenuButton.addEventListener("click", toggleMenu);
function toggleMenu() {
  document.body.classList.toggle("sidebar-open");
}