<dialog class="dialog">
  <form>
    <p>
      <label>
        Type your name:
        <input type="text" id="name" />
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirm">Continue</button>
    </div>
  </form>
</dialog>
<p>
  <button id="show">Open dialog</button>
</p>
<output></output>
<hr />
<dialog class="drawer">
  Drawer content
  <form>
    <button formmethod="dialog">Close</button>
  </form>
</dialog>
<p>
  <button id="open-drawer">Open dialog as a drawer</button>
</p>

.dialog {
  background: #7FDBFF;
  border-color: #7FDBFF;
  border-radius: 8px;
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 90%;
  max-width: 240px;
  bottom: 0;
  margin: 0;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .drawer {
    animation: drawerShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes overlayShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drawerShow {
  from {
    transform: translateX(-400px);
  }
  to {
    transform: translateX(0px);
  }
}

const dialog = document.querySelector('dialog')
const confirm = document.querySelector('#confirm')
const show = document.querySelector('#show')
const output = document.querySelector('output')
const input = document.querySelector('#name')
const openDrawer = document.querySelector('#open-drawer')
const drawer = document.querySelector('.drawer')

openDrawer.addEventListener('click', () => {
  drawer.showModal()
})


show.addEventListener('click', () => {
  dialog.showModal()
})

dialog.addEventListener('close', (e) => {
  output.value =
    ['default', 'cancel'].includes(dialog.returnValue)
      ? 'The name is required'
      : `Your name is: ${dialog.returnValue}`
})

confirm.addEventListener('click', (e) => {
  e.preventDefault()
  dialog.close(input.value)
})