dialog element in 'right-hand' drawer layout

dialog-in-right-hand-drawer-layout.js

document.body.innerHTML = `
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font: normal 1rem Arial, Sans-serif;
    }
     dialog {
       margin: 0;
       padding: 0; 
       min-width: 233px;
       max-width: 100%;
       max-height: 100%;
       height: 100vh;
       left: 100%;
       transform: translateX(-100%);
     }
     dialog::backdrop {
       transition: opacity 0.5s;
     }
     dialog:not([open])::backdrop {
        opacity: 0;
     }
     dialog[open]::backdrop {
       opacity: 1;
     }
     dialog > * {
       padding: 0.5rem; 
     }
     dialog > header {
       display: flex;
       flex-flow: row nowrap;
       border-bottom: 1px solid;
       align-items: start;
       justify-content: space-between;
     }
     dialog .dialog__title {
       font-weight: bold;
       font-size: 1.2rem;
     }
  </style>
  <p>Content <a href="#">Link</a></p>
  <button autofocus type="button" class="open-modal-btn">Open modal</button>
  
  <dialog>
    <header>
      <span class="dialog__title">Title</span>
      <button type="button" class="dialog__close-btn">\u0078</button>
    </header>
    <section>
      <p>Hello</p>
    </section>
  </dialog>
`

const $ = (selector, root = document) => 
    root.querySelector(selector),
    dialog = $('dialog')

;

$('.open-modal-btn').addEventListener('click', () => {
    dialog.showModal();
});

$('.dialog__close-btn').addEventListener('click', () => {
    dialog.close();
});

dialog.showModal();

dialog.onclick = (e) => {
    const box = dialog.getBoundingClientRect();
    if (e.clientX < box.left) {
        dialog.close();
    }
}