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

  <div class="demo-row">
    <button class="btn btn-sm btn-primary" type="button" onclick="openDemoDrawer('right')">
      Open drawer
    </button>
    <button class="btn btn-sm btn-secondary" type="button" onclick="openDemoDrawer('left')">
      Open left drawer
    </button>
  </div>

  <script>
    function openDemoDrawer(position) {
      const drawer = VMKUIKit.Drawer.create("demo-drawer-" + position, {
        title: position === "left" ? "Left drawer" : "Drawer title",
        position: position,
        bodyHtml: "<p>" + (position === "left" ? "This drawer slides in from the left." : "Drawer content goes here. Press Escape or click the backdrop to close.") + "</p>",
        footer: ""
      });
      drawer.show();
    }
  </script>
</section>