JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="menu">
  MENU
</div>

<div class="content">
  <button type="button" class="toggle-menu">
    Menü öffnen
  </button>
  
  CONTENT
</div>

SCSS

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  z-index: 10;
  transform: translate(-300px, 0);
  transition: transform 150ms ease-in-out;
  
  background: #283593;
  color: white;
  
  &.is-visible {
    transform: translate(0, 0);  
  }
}

.content {
  background: #f5f5f5;
}

.toggle-menu {
  float: right;
}

JavaScript

var toggleButton = document.querySelector('.toggle-menu');
var menu = document.querySelector('.menu');

toggleButton.addEventListener('click', function(e) {
  menu.classList.toggle('is-visible');
});