Drawer Slide

<div class="nuda-drawer-wrap is-open">
  <div class="nuda-drawer-wrap__main">Main content</div>
  <aside class="nuda-drawer-wrap__panel">
    <div class="nuda-drawer-wrap__title">Notifications</div>
    <div class="nuda-drawer-wrap__row">New comment on Pull #12</div>
    <div class="nuda-drawer-wrap__row">Build #284 succeeded</div>
    <div class="nuda-drawer-wrap__row">Sara invited you to a project</div>
  </aside>
</div>

const drawer = document.querySelector('.nuda-drawer-wrap');
drawer.querySelector('.nuda-drawer-wrap__main').addEventListener('click', () => {
  drawer.classList.toggle('is-open');
});

.nuda-drawer-wrap {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 340px;
  height: 200px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
}

.nuda-drawer-wrap__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #63636e;
  font-size: 12px;
  cursor: pointer;
}

.nuda-drawer-wrap__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  padding: 14px;
  background: #0c0c10;
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}

.nuda-drawer-wrap.is-open .nuda-drawer-wrap__panel {
  transform: translateX(0);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,.6);
}

.nuda-drawer-wrap__title {
  color: #fafafa;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.nuda-drawer-wrap__row {
  padding: 8px 10px;
  color: #a0a0a8;
  font-size: 11px;
  border-radius: 7px;
  margin-bottom: 4px;
  background: rgba(255,255,255,.04);
  transform: translateX(20px);
  opacity: 0;
  transition: transform .4s,opacity .35s;
}

.nuda-drawer-wrap.is-open .nuda-drawer-wrap__row {
  transform: translateX(0);
  opacity: 1;
}

.nuda-drawer-wrap.is-open .nuda-drawer-wrap__row:nth-child(2) {
  transition-delay: .15s;
}

.nuda-drawer-wrap.is-open .nuda-drawer-wrap__row:nth-child(3) {
  transition-delay: .25s;
}

.nuda-drawer-wrap.is-open .nuda-drawer-wrap__row:nth-child(4) {
  transition-delay: .35s;
}