Sidebar - Custom Button

// ****** Sidebar button start ********
(function () {
  const buttons = [
    {
      name: "👉🏻  Upgrade To Next Level  👈🏻",
      id: "btn-1",
      actionURL: "https://www.theghlacademy.com/upgrade",
      style: "fill",
    },

    {
      name: "Become An Affiliate",
      id: "btn-2",
      actionURL: "https://www.theghlacademy.com/affiliate",
      style: "fill",
    },

    {
      name: "View Help Resources",
      id: "btn-3",
      actionURL: "https://www.theghlacademy.com/help",
      style: "fill",
    },
  ];

  const customButtonsStyleSheet = `
    :root {
      --cm-buttons-font-family: 'Roboto', sans-serif;
    
      --custom-cm-btn-border-radius: 5px;
      --custom-cm-btn-padding: 10px 25px;
      --custom-cm-btn-font-size: 16px;
      --custom-cm-btn-font-weight: 700;
      --custom-cm-btn-background-color: rgb(33, 46, 75);
      --custom-cm-btn-font-color: #fff;
      --custom-cm-outline-btn-background-color: transparent;
      --custom-cm-outline-btn-font-color: rgb(24, 15, 120);
      --custom-cm-btn-outline-border: 1px solid rgb(24, 15, 120);
      --transition-all: all 0.3s ease-in;
    }
    
    .cm-buttons-con {
      margin-bottom: 20px !important;
      display: flex !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      flex-direction: column !important;
    }
    
    .cm-buttons-con .cm-custom-button {
      width: 100% !important;
      display: inline-flex !important;
      padding: var(--custom-cm-btn-padding) !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      font-size: var(--custom-cm-btn-font-size) !important;
      font-weight: var(--custom-cm-btn-font-weight) !important;
      border-radius: var(--custom-cm-btn-border-radius) !important;
      text-decoration: none !important;
      transition: var(--transition-all) !important;
    }
    
    .cm-buttons-con .cm-custom-button:not(:last-child) {
        margin-bottom: 15px !important;
    }
    
    .cm-buttons-con .cm-custom-button.fill {
      background-color: var(--custom-cm-btn-background-color) !important;
      color: var(--custom-cm-btn-font-color) !important;
      border: 1px solid transparent !important;
    }
    
    .cm-buttons-con .cm-custom-button.fill:hover {
      background-color: var(--custom-cm-outline-btn-background-color) !important;
      color: var(--custom-cm-outline-btn-font-color) !important;
      border: var(--custom-cm-btn-outline-border) !important;
    }
    
    .cm-buttons-con .cm-custom-button.outline {
      background-color: var(--custom-cm-outline-btn-background-color) !important;
      color: var(--custom-cm-outline-btn-font-color) !important;
      border: var(--custom-cm-btn-outline-border) !important;
    }
    
    .cm-buttons-con .cm-custom-button.outline:hover {
      background-color: var(--custom-cm-btn-background-color) !important;
      color: var(--custom-cm-btn-font-weight) !important;
    }
    
    `;

  const head = document.querySelector("head");
  const style = document.createElement("style");
  style.innerHTML = customButtonsStyleSheet;
  head.append(style);

  const customBtnsCon = document.createElement("div");
  customBtnsCon.className = "cm-buttons-con";

  buttons.forEach((button) => {
    const btn = document.createElement("button");
    const buttonClass = `cm-custom-button ${button.name.toLowerCase()} ${
      button.style
    }`;
    btn.className = buttonClass;
    btn.innerHTML = button.name;
    btn.id = button.id;

    btn.addEventListener("click", () => {
      window.open(button.actionURL, "_blank");
    });

    customBtnsCon.appendChild(btn);
  });

  const getElementByFn = (selector, cb) => {
    const intervalId = setInterval(() => {
      const element = document.querySelectorAll(selector);

      if (element.length === 1) {
        clearInterval(intervalId);
        cb(element[0]);
      }

      if (element.length > 1) {
        clearInterval(intervalId);
        cb(element);
      }
    }, 200);

    setTimeout(function () {
      clearInterval(intervalId);
    }, 20000);
  };

  const runCustomCode = (pathname) => {
    if (!pathname.includes("categories")) return;
    if (customBtnsCon.isConnected) customBtnsCon.remove();

    getElementByFn("#instructor-card", (lessonCard) => {
      const sidebar = lessonCard.parentElement;
      if (!sidebar)
        return console.log(
          "Button Not inserted is because ref element not found"
        );
      sidebar.insertBefore(customBtnsCon, sidebar.childNodes[0]);
    });
  };

  let pathname = "";
  window.addEventListener("DOMNodeInserted", (e) => {
    if (pathname == location.pathname) return;
    pathname = location.pathname;
    runCustomCode(pathname);
  });
})();
// ****** Sidebar button End ********

Add the JS code into Membership > Setting > Advance > Custom JS