Edit in JSFiddle

JavaScript
HTML

let drawer = new CupertinoPane('ion-drawer');

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
  presentDrawer();
}

async function presentDrawer() {
  drawer.present({animate: true});
};

async function destroyDrawer() {
  drawer.destroy({animate: true});
};

async function hideDrawer() {
  drawer.hide();
};

async function isHiddenDrawer() {
    console.log(await drawer.isHidden());
};

async function setTopDrawer() {
  drawer.moveToBreak('top');
};

async function setMiddleDrawer() {
  drawer.moveToBreak('middle');
};

async function setBottomDrawer() {
  drawer.moveToBreak('bottom');
};

<html mode="ios">
<body>
<ion-app>
  <ion-content scroll-y="false">
    <ion-drawer style="padding: 0 20px;">
      <h1>Header</h1>
      <p hide-on-bottom>Content</p> 
    </ion-drawer>
  
    <ion-button expand="block" color="danger" onclick="presentDrawer()">Present Drawer</ion-button>
    <ion-button expand="block" color="danger" onclick="destroyDrawer()">Destroy Drawer</ion-button>
    <ion-button expand="block" onclick="hideDrawer()">Hide Drawer</ion-button>
    <ion-button expand="block" onclick="isHiddenDrawer()">Drawer is hidden</ion-button>
    <ion-button expand="block" color="secondary" onclick="setTopDrawer()">Set Top</ion-button>
    <ion-button expand="block" color="secondary" onclick="setMiddleDrawer()">Set Middle</ion-button>
    <ion-button expand="block" color="secondary" onclick="setBottomDrawer()">Set Bottom</ion-button>
  </ion-content>
</ion-app>
</body>
</html>