<section class="demo-section">
  <h2>Drawers</h2>

  <div class="demo-row">
    <button class="btn btn-primary" type="button" onclick="document.getElementById('demo-drawer').classList.add('a-show')">
      Open drawer
    </button>
    <button class="btn btn-secondary" type="button" onclick="document.getElementById('demo-drawer-left').classList.add('a-show')">
      Open left drawer
    </button>
  </div>

  <div id="demo-drawer" class="drawer" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="demo-drawer-title">
    <div class="drawer-backdrop" onclick="this.parentElement.classList.remove('a-show')"></div>
    <aside class="drawer-panel" role="document">
      <header class="drawer-header">
        <h4 id="demo-drawer-title" class="drawer-title">Drawer title</h4>
        <button class="drawer-close" type="button" aria-label="Close" onclick="this.closest('.drawer').classList.remove('a-show')">
          <span class="vmk-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        </button>
      </header>
      <div class="drawer-body">
        <p>Drawer content goes here. Press Escape or click the backdrop to close.</p>
      </div>
      <footer class="drawer-footer">
        <button class="btn btn-secondary" type="button" onclick="this.closest('.drawer').classList.remove('a-show')">Cancel</button>
        <button class="btn btn-primary" type="button" onclick="this.closest('.drawer').classList.remove('a-show')">Save</button>
      </footer>
    </aside>
  </div>

  <div id="demo-drawer-left" class="drawer drawer-left" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="demo-drawer-left-title">
    <div class="drawer-backdrop" onclick="this.parentElement.classList.remove('a-show')"></div>
    <aside class="drawer-panel" role="document">
      <header class="drawer-header">
        <h4 id="demo-drawer-left-title" class="drawer-title">Left drawer</h4>
        <button class="drawer-close" type="button" aria-label="Close" onclick="this.closest('.drawer').classList.remove('a-show')">
          <span class="vmk-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        </button>
      </header>
      <div class="drawer-body">
        <p>This drawer slides in from the left.</p>
      </div>
    </aside>
  </div>
</section>