Micromodal.jsをグローバルナビで使う（背景固定含む）

<header class="header">

      <div class="header__inner">

        <nav class="nav" aria-label="ヘッダー内メニュー">
          <!-- ドロワー -->
          <div id="drawer-1" class="nav__drawer" aria-hidden="true">

            <!-- 開閉ボタン -->
            <button id="js_drawer_button_open" class="nav__drawer-button" aria-label="メニューを開閉する" data-micromodal-trigger="drawer-1" aria-expanded="false" type="button">
              <span class="button-line"></span>
            </button>

            <!-- 幕 -->
            <div class="nav__drawer-overlay" data-micromodal-close tabindex="-1"></div>

            <!-- メニューコンテンツ -->
            <div class="nav__drawer-container" data-micromodal-close aria-modal="true" aria-labelledby="drawer-1-content" role="dialog">

              <div class="nav__drawer-menu">
                <ul id="drawer-1-content" class="nav__drawer-menu-list">
                  <li><a href="">テスト１</a></li>
                  <li><a href="">テスト２</a></li>
                  <li><a href="">テスト３</a></li>
                  <li><a href="">テスト４</a></li>
                  <li><a href="">テスト５</a></li>
                </ul>

              </div>
            </div>

          </div>
        </nav>

      </div>
    </header>

/* リセットCSS ------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  all: unset;
}

body {
  background: #fff;
}

/* アクセシビリティ用 ------------------------------- */

/* マウスクリック操作の場合は ouline を消し、キーボード操作の場合は outline を表示する場合 */
:focus:not(:focus-visible) {
  outline: 0;
}

/* アウトライン表示 */
:focus-visible {
  outline: 2px solid red;
  outline-offset: 0;
}

/* -------------------------------------------------------------------- */
/*
/* メニュー表示・非表示
/* -------------------------------------------------------------------- */

  /* クリック・メニュー表示 ------------------------------- */
  .nav__drawer[aria-hidden="false"] {

    .nav__drawer-menu {
      animation: slideIn 0.5s forwards;
    }
  }

  /* クリック・メニュー非表示 ------------------------------- */
  .nav__drawer[aria-hidden="true"] {

    .nav__drawer-menu {
      animation: slideOut 0.5s forwards;
    }
  }

  /* キーフレーム slideIn ------------------------------- */
  @keyframes slideIn {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0%);
    }
  }

  @keyframes slideOut {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(100%);
    }
  }

/* -------------------------------------------------------------------- */
/*
/* Micromodal.js をドロワー向けに
/* -------------------------------------------------------------------- */
.nav__drawer {

  /* overlay｜クラス付与で、どこでもタップ閉じる ------------------------------- */
  .nav__drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    will-change: opacity,
      visibility;
  }

  &[aria-hidden="false"] .nav__drawer-overlay {
    opacity: 1;
    visibility: visible;
  }

  // メニューコンテンツ非表示
  .nav__drawer-container {
    display: none;
    overflow: hidden;
  }

  // クラス付与でメニューコンテンツ表示
  &.is-open .nav__drawer-container {
    display: inline;
  }
}

/* -------------------------------------------------------------------- */
/*
/* モーダル開閉
/* -------------------------------------------------------------------- */
(function () {

  /* 背景固定用 ------------------------------- */
  const backfaceFixed = (fixed) => {
    /**
     * 表示されているスクロールバーとの差分を計測し、背面固定時はその差分body要素に余白を生成する
     */
    const scrollbarWidth = window.innerWidth - document.body.clientWidth;
    document.body.style.paddingRight = fixed ? `${scrollbarWidth}px` : '';

    /**
     * スクロール位置を取得する要素を出力する(`html`or`body`)
     */
    const scrollingElement = () => {
      const browser = window.navigator.userAgent.toLowerCase();
      if ('scrollingElement' in document) return document.scrollingElement;
      if (browser.indexOf('webkit') > 0) return document.body;
      return document.documentElement;
    };

    /**
     * 変数にスクロール量を格納
     */
    const scrollY = fixed
      ? scrollingElement().scrollTop
      : parseInt(document.body.style.top || '0');

    /**
     * CSSで背面を固定
     */
    const styles = {
      height: '100vh',
      left: '0',
      overflow: 'hidden',
      position: 'fixed',
      top: `${scrollY * -1}px`,
      width: '100vw',
    };

    Object.keys(styles).forEach((key) => {
      document.body.style[key] = fixed ? styles[key] : '';
    });

    /**
     * 背面固定解除時に元の位置にスクロールする
     */
    if (!fixed) window.scrollTo(0, scrollY * -1);
  };

  // ========================================================================================

  const drawer_01 = document.getElementById('drawer-1');
  const drawer_open_button = document.getElementById('js_drawer_button_open');

  // メニューの開閉
  drawer_open_button.addEventListener("click", () => {
    if (!drawer_01.classList.contains("is-open")) {

      MicroModal.show("drawer-1", {
        disableScroll: true,
        awaitOpenAnimation: true,
        awaitCloseAnimation: true,

        onShow: (modal) => {
          drawer_open_button.classList.add("is-open");
          drawer_open_button.ariaExpanded = true; // スクリーンリーダーに伝える役割

          backfaceFixed(true); // 背景固定する

          console.info(`${modal.id} is shown`); // Optional
        },

        onClose: (modal) => {
          drawer_open_button.classList.remove("is-open");
          drawer_open_button.ariaExpanded = false; // スクリーンリーダーに伝える役割

          backfaceFixed(false); // 背景固定しない

          console.info(`${modal.id} is hidden`); // Optional
        }
      });
    } else {
      MicroModal.close("drawer-1")
    }
  });

}());