JSFiddle - React, Tailwind, and code Playground

HTML

<header>

<ul class="list">
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
</ul>
<button class="nav">
Nav
</button>
</header>

CSS

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: red;
}

.nav {
  float: right;
  height: 20px;
  width: 30px;
  margin: 10px 20px;
}

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50px;
  right: -80%;
  overflow-y: scroll;
  height: 100%;
  width: 80%;
  transition: all .25s ease-out;
  margin: 0;
  padding: 0;
  background-color: grey;
}

.in {
  right: 0;
}

.item {
  border: 1px solid black;
  min-height: 50px;
  min-width: 100px;
}

JavaScript

document.querySelector('.nav').addEventListener('click', function () {
    const nav = document.querySelector('.list');
    nav.classList.toggle('in');
});