<dialog class="dialog">
  <form>
    <p>
      <label>
        Digite seu nome:
        <input type="text" id="name" />
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancelar</button>
      <button id="confirm">Continuar</button>
    </div>
  </form>
</dialog>
<p>
  <button id="show">Abrir diálogo</button>
</p>
<output></output>

<hr />

<dialog class="drawer">
  Conteúdo da gaveta
  <form>
    <button formmethod="dialog">Fechar</button>
  </form>
</dialog>

<p>
  <button id="open-drawer">Abrir diálogo como "gaveta"</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()
})

// Abre o modal ao clicar no botão "Abrir diálogo"
show.addEventListener('click', () => {
  dialog.showModal()
})

// Ao fechar o diálogo, exibe o valor digitado no formulário
dialog.addEventListener('close', (e) => {
  output.value =
    ['default', 'cancel'].includes(dialog.returnValue)
      ? 'O nome é obrigatório'
      : `Seu nome é: ${dialog.returnValue}`
})

confirm.addEventListener('click', (e) => {
  // Previne o comportamento padrão de enviar o formulário
  e.preventDefault()
  // Enviar o valor do input ao fechar o dialog
  dialog.close(input.value)
})