menu.html

<!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">

    -- TEAM NAME ---->
<!-- <a class="navbar-brand" href="#">TU-Delft</a> -->

<!---- SMALL SCREEN MENU ICON ---->
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto left-aligned"> -->

<!---- HOME ---->
<!-- <li class="nav-item">
          <a class="nav-link" href="{{ url_for('home') }}">Home</a>
        </li> -->

<!---- TEAM ---->
<!-- <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="{{ url_for('pages', page='team') }}" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Team
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="{{ url_for('pages', page='team') }}">Team</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
          </ul>
        </li> -->

<!---- PROJECT ---->
<!-- <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Project
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='description') }}">Description</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='experiments') }}">Experiments</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='results') }}">Results</a></li>
          </ul>
        </li> -->

<!---- SAFETY ---->
<!-- <li class="nav-item">
          <a class="nav-link" href="{{ url_for('pages', page='safety') }}">Safety</a>
        </li> -->

<!---- HUMAN PRACTICES ---->
<!-- <li class="nav-item">
          <a class="nav-link" href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
        </li> -->

<!---- AWARDS ---->
<!-- <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Awards
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="{{ url_for('pages', page='education') }}">Education</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='measurement') }}">Measurement</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='model') }}">Model</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='plant') }}">Plant</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='software') }}">Software</a></li>
            <li><a class="dropdown-item" href="{{ url_for('pages', page='sustainable') }}">Sustainable</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav> -->

<nav class="my-nav" id="navbox">
  <a href="{{ url_for('home') }}" class="icon"></a>

  <ul class="my-navbar" id="my-navbar">
    <li id="project">
      <a href="#" style="cursor: default">Project</a>
      <ul class="son">
        <li>
          <a href="{{ url_for('pages', page='description') }}">Description</a>
        </li>
        <li>
          <a href="{{ url_for('pages', page='engineering') }}">Engineering</a>
        </li>
        <li>
          <a href="{{ url_for('pages', page='experiments') }}"
            >Materials and Methods</a
          >
        </li>
        <li><a href="{{ url_for('pages', page='results') }}">Results</a></li>
        <li>
          <a href="{{ url_for('pages', page='contribution') }}">Contribution</a>
        </li>
        <li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
      </ul>
    </li>
    <li>
      <a href="#" style="cursor: default">Human Practices</a>
      <ul class="son">
        <li>
          <a href="{{ url_for('pages', page='education') }}"
            >Education and Outreach</a
          >
        </li>
        <li>
          <a href="{{ url_for('pages', page='human-practices') }}"
            >Human Practices</a
          >
        </li>
      </ul>
    </li>
    <li>
      <a href="#" style="cursor: default">Special Prizes</a>
      <ul class="son">
        <li>
          <a href="{{ url_for('pages', page='entrepreneurship') }}"
            >Entrepreneurship</a
          >
        </li>
        <li>
          <a href="{{ url_for('pages', page='human-practices') }}"
            >Integrated Human Practices</a
          >
        </li>
      </ul>
    </li>
    <li>
      <a href="#" style="cursor: default">Team</a>
      <ul class="son">
        <li><a href="{{ url_for('pages', page='team') }}">Roster</a></li>
        <li>
          <a href="{{ url_for('pages', page='attributions') }}">Attributions</a>
        </li>
      </ul>
    </li>
  </ul>
  <a href="#" class = "tu-delft"></a>
    <!-- <img src="https://static.igem.wiki/teams/5054/tu-delft-logo-svg.png" alt="TU Delft Logo" /> -->
  </a>
</nav>

<script>
  // Finds the current page and highlights the corresponding menu item by adding the 'active' class
  function updateActivePage() {
    var current = window.location.pathname;
    var itemLinks = document.querySelectorAll(
      ".my-nav .my-navbar > li > ul.son > li"
    );
    var activeItem = null;
    itemLinks.forEach(function (item) {
      var url = new URL(item.querySelector("a").href);
      if (url.pathname === current) {
        activeItem = item;
      }
    });

    itemLinks.forEach(function (item) {
      item.classList.remove("active");
    });

    if (activeItem) {
      activeItem.classList.add("active");
    }
  }

  updateActivePage();
  window.addEventListener("popstate", updateActivePage);
  window.addEventListener("load", updateActivePage);
</script>