<nav class="navbar">
  <button class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <ul>
    <li><a target="_blank" href="https://codepen.io/paulobrien/pen/wvdQaoE">See Version 2</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item little longer</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item little longer</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
  </ul>
</nav>
<!--
<div class="wrap wrap1">
  <section class="top">
    <h1>Testing Side Nav</h1>
  </section>
</div>
<div class="wrap wrap2">
  <section id="test">
    <h2>Testing testing Testing</h2>
    <p>Great turbulent clouds laws of physics Flatland galaxies citizens of distant epochs paroxysm of global death. Bits of moving fluff hydrogen atoms white dwarf the sky calls to us extraordinary claims require extraordinary evidence the carbon in our apple pies. Orion's sword courage of our questions dream of the mind's eye Cambrian explosion dream of the mind's eye the carbon in our apple pies? Permanence of the stars a mote of dust suspended in a sunbeam something incredible is waiting to be known something incredible is waiting to be known made in the interiors of collapsing stars Orion's sword and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>

  </section>
</div>
-->

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
.navbar {
  display: flex;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 480px;
  min-width: 270px;
  /*overflow: auto;*/
  transition: 0.5s ease;
  pointer-events: none;
  transform: translatex(calc(-100% + 50px));
}
.navbar ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 55px;
  list-style: none;
  padding: 10px;
  background: #ccc;
  overflow: auto;
  z-index: 2;
}
.navbar a {
  display: block;
  padding: 5px;
  color: #000;
  text-decoration: none;
  transition: 0.2s ease;
}
.navbar a:hover {
  background: #000;
  color: #fff;
}
.toggle-button {
  width: 47px;
  height: 47px;
  margin: 5px 0 0 0;
  order: 2;
  pointer-events: initial;
  position: sticky;
  top: 0;
  margin-left: auto;
  z-index: 3;
  border-radius: 50%;
  border: 1px solid silver;
  background: #000;
  color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: 0.5s ease;
}
/* stuff below just for testing - this should be done with js and add a class when clicked*/
.toggle-button:before {
  content: "menu";
}
.navbar:focus-within {
  transform: translatex(0);
  pointer-events: initial;
}
/* just for testing*/
.navbar:focus-within .toggle-button {
  pointer-events: none;
  background: red;
}
.navbar:focus-within .toggle-button:before {
  content: "X";
}

/* just testing extras */
/*
.navbar:focus-within:before {
  content: "";
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.9;
  transform: translate;
  z-index:1;
}
.wrap > section {
  max-width: 1280px;
  margin: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.wrap {
  min-height: 100vh;
  background: url(https://picsum.photos/id/1015/200/300);
  background-attachment: fixed;
  background-size: cover;
}
.wrap2 {
  background-image: url(https://picsum.photos/id/115/200/300);
}
h1,
h2 {
  text-align: center;
  margin: 0;
  padding: 1rem 0 2rem;
}
*/