Off-Canvas Navigation

<input class="offcanvas-check" type="checkbox" id="oc1">
<label class="offcanvas-open" for="oc1">☰ Menu</label>
<label class="offcanvas-overlay" for="oc1"></label>
<div class="offcanvas-panel">
  <label class="offcanvas-close" for="oc1">✕ Close</label>
  <nav>
    <a href="#">Link</a>
  </nav>
</div>

.offcanvas-check { display: none; }

.offcanvas-panel {
  position: fixed;
  top: 0; left: 0;
  width: 260px; height: 100%;
  background: #1a1a2e;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 100;
}

.offcanvas-check:checked ~ .offcanvas-panel {
  transform: translateX(0);
}

.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 99;
}

.offcanvas-check:checked ~ .offcanvas-overlay {
  opacity: 1;
  pointer-events: auto;
}