<nav>
  <input type="checkbox" role="button" aria-label="Display the menu" aria-expanded="false" aria-controls="menu">
  <ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>
  <h1>Title</h1>
</main>

body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  margin: 0;
}
ul {
  padding: 20px 0;
  margin: 0;
  background: teal;
  min-width: 180px;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}
ul li a {
  padding: 10px 20px;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}
ul li a:hover {
  text-decoration: underline;
}
nav input {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 2;
  right: -70px;
  height: 40px;
  grid-template-columns: 1fr 40px;
  padding: 20px;
  margin: 0;
  display: none;
  overflow: hidden;
  box-sizing: content-box;
  background: teal;
  border-radius: 0 50px 50px 0;
  
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
nav input:before,
nav input:after {
  content:"";
  grid-area:1/2;
  transition:.3s;
}
nav input:before {
  background:
    radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%,
    linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
}
nav input:after {
  padding: 10%;
  background: 
    radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,
    conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0)
     100% 100%/60% 60% padding-box content-box;
  transform: translate(-100%) translateZ(0) rotate(45deg);
  opacity:0;
}
nav input:checked:before {
  transform: translate(100%);
  opacity:0;
}
nav input:checked:after {
  transform: translate(0) translateZ(0) rotate(45deg);
  opacity:1;
}

@media (max-width:600px) {
  body {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }
  nav {
    position: fixed;
    top: 0;
    left: 0;
  }
  nav ul {
    transform: translateX(-100%);
    box-shadow: 0 0 0 100vmax #0000;
    transition: .5s;
  }
  nav input {
    display: grid;
    transform: translateX(calc(80px - 100%));
    transition: .5s;
  }
  nav input:checked + ul {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax #0005;
  }
  nav input:checked {
    transform: translateX(0);
  }
}