How to use the @material/drawer.MDCTemporaryDrawer function in @material/drawer

const progressBar = document.querySelector("#progressBar");
  const rippleSurface = document.querySelectorAll(".ripple-surface");

  for (let i = 0; i < 9; i++) {
    predictedWordsButtons.push(document.querySelector(`#word${i + 1}`));
  }

  modelLoadingNotice.style.display = "block";
  btnsDiv.style.display = "none";
  inputTextField.style.display = "none";

  rippleSurface.forEach(i => MDCRipple.attachTo(i));

  let mdcTextField = new MDCTextField(inputTextField);
  MDCTopAppBar.attachTo(document.querySelector("#app-bar"));
  let drawer = new MDCTemporaryDrawer(document.querySelector("#drawer"));

  document.querySelector("#menu").addEventListener("click", () => {
    drawer.open = true;
  });

  const model = await loadModel("/web_model/model.json");

  /**
   * Predict next word
   * @param {string} string Input String.
   * @param {number} numPrediction Total number of prediction to get.
   */
  window.predictNextWord = async (string, numPrediction) => {
    isQuestion = false;
    string = string.toLowerCase().split(" ");
    let indexes = stringToIndexes(string);

mounted() {
        this.mdcTemporaryDrawer = new MDCTemporaryDrawer(this.$el)
    },
    destroyed() {

language === 'zh' ? app.innerHTML = _(template, { imports })(chinese) : noop();
  language === 'ja' ? app.innerHTML = _(template, { imports })(japanese) : noop();

  const enAnchor = $('#en');
  const zhAnchor = $('#zh');
  const jaAnchor = $('#ja');
  page === 'home' ? enAnchor.href = `/en` : enAnchor.href = `/en/${page}`;
  page === 'home' ? zhAnchor.href = `/zh` : zhAnchor.href = `/zh/${page}`;
  page === 'home' ? jaAnchor.href = `/ja` : jaAnchor.href = `/ja/${page}`;

  const bodyEl = $('body');
  const mainEl = $('main');
  const drawerDesktopEl = $('.mdc-drawer--permanent[data-desktop]');
  const drawerMobileEl = $('.mdc-drawer--temporary[data-mobile]');

  const drawerMobile = new MDCTemporaryDrawer(drawerMobileEl);

  $('#menu').onclick = (): void => {
    if (window.innerWidth <= 599) {
      drawerMobile.open = true;
    } else {
      mainEl.classList.toggle(style.jsMain);
      drawerDesktopEl.classList.toggle(style.jsDrawer);
    }
  };

  drawerMobileEl.addEventListener('MDCTemporaryDrawer:open', () => { bodyEl.style.overflowY = 'hidden'; });
  drawerMobileEl.addEventListener('MDCTemporaryDrawer:close', () => { bodyEl.style.overflowY = 'auto'; });

  [].forEach.call(
    drawerMobileEl.querySelectorAll('a.mdc-list-item'),
    () => { bodyEl.style.overflowY = 'auto'; },