<!-- <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>