text: class MenuBar extends HTMLElement {
      constructor() {
          super();
      }
      connectedCallback() {
          // this.innerHTML = menubarHTML.toString();
          this.innerHTML = `<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
          <div class="container">
              <a class="navbar-brand" href="#page-top">
                  <img src="assets/img/navbar-logo.svg" alt="..." />
              </a>
              <button
                  class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarResponsive"
                  aria-controls="navbarResponsive"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
              >
                  Menu
                  <i class="fas fa-bars ms-1"></i>
              </button>
              <div class="collapse navbar-collapse" id="navbarResponsive">
                  <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="index.html"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Home
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Requirements
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Research
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              HCI
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              System Design
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Implementation
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Testing
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="nav-item dropdown">
                          <a
                              class="nav-link dropdown-toggle"
                              href="#"
                              id="navbarDropdown"
                              role="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                          >
                              Evaluation
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li>
                                  <a class="dropdown-item" href="#">
                                      Something else here
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>`;
      }
  }
  
  customElements.define("menubar-component", MenuBar);
  