text: export class AppMenu {
      constructor(currentPage) {
          AppMenu.body = document.getElementById("body");
          AppMenu.header = document.getElementById("header");
          if (AppMenu.header !== null) {
              // create main btn
              let mainBtn = document.createElement("div");
              mainBtn.classList.add("header-btn");
              mainBtn.id = "main-btn";
              mainBtn.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='20' \
              height='20' fill='#888' class='bi bi-grid-3x3-gap-fill' viewBox='0 0 16 \
              16'><path d='M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 \
              1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1\
              V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 \
              7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 \
              1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 \
              1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 \
              1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 \
              1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 \
              1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z'/></svg>";
              AppMenu.header.appendChild(mainBtn);
              // create app list
              let appList = document.createElement("div");
              appList.id = "app-list";
              let recorderOption = document.createElement("a");
              recorderOption.id = "recorder-option";
              recorderOption.classList.add("app-option");
              let recorderIcon = document.createElement("img");
              recorderIcon.src = `../recorder/icon.png`;
              let recorderNameLabel = document.createElement("div");
              recorderNameLabel.innerText = "Recorder";
              recorderOption.appendChild(recorderIcon);
              recorderOption.appendChild(recorderNameLabel);
              let divideLine = document.createElement("hr");
              divideLine.classList.add("app-divide-line");
              let simulatorOption = document.createElement("a");
              simulatorOption.id = "simulator-option";
              simulatorOption.classList.add("app-option");
              let simulatorIcon = document.createElement("img");
              simulatorIcon.src = `../simulator/icon.png`;
              let simulatorNameLabel = document.createElement("div");
              simulatorNameLabel.innerText = "Simulator";
              simulatorOption.appendChild(simulatorIcon);
              simulatorOption.appendChild(simulatorNameLabel);
              let divideLine2 = document.createElement("hr");
              divideLine2.classList.add("app-divide-line");
              let simulatorProOption = document.createElement("a");
              simulatorProOption.id = "simulator-pro-option";
              simulatorProOption.classList.add("app-option");
              let simulatorProIcon = document.createElement("img");
              simulatorProIcon.src = `../simulatorPro/icon.png`;
              let simulatorProNameLabel = document.createElement("div");
              simulatorProNameLabel.innerText = "Simulator Pro";
              simulatorProOption.appendChild(simulatorProIcon);
              simulatorProOption.appendChild(simulatorProNameLabel);
              appList.appendChild(recorderOption);
              appList.appendChild(divideLine);
              appList.appendChild(simulatorOption);
              appList.appendChild(divideLine2);
              appList.appendChild(simulatorProOption);
              AppMenu.header.appendChild(appList);
              // add event listeners
              AppMenu.mainBtn = document.getElementById("main-btn");
              AppMenu.appList = document.getElementById("app-list");
              if (AppMenu.mainBtn !== null && AppMenu.body !== null) {
                  AppMenu.mainBtn.addEventListener("click", () => {
                      if (AppMenu.mainBtn !== null && AppMenu.appList !== null && AppMenu.body !== null) {
                          if (AppMenu.appList.style.display === "flex") {
                              AppMenu.appList.style.display = "none";
                          }
                          else
                              AppMenu.appList.style.display = "flex";
                      }
                  });
                  AppMenu.body.addEventListener("click", (e) => {
                      if (!e.path.includes(AppMenu.mainBtn) && AppMenu.appList !== null) {
                          AppMenu.appList.style.display = "none";
                      }
                  });
              }
              // set anchor
              recorderOption.href = "../recorder/";
              simulatorOption.href = "../simulator/";
              simulatorProOption.href = "../simulatorPro/";
              if (currentPage === "recorder") {
                  recorderOption.href = "#";
                  recorderOption.classList.add("active");
              }
              else if (currentPage === "simulator") {
                  simulatorOption.href = "#";
                  simulatorOption.classList.add("active");
              }
              else if (currentPage === "simulatorPro") {
                  simulatorProOption.href = "#";
                  simulatorProOption.classList.add("active");
              }
          }
      }
  }
  