highlight current page in main nav

_includes/header.css

@@ -53,6 +53,7 @@ header {
   transition: opacity .3s ease-out;
 }
 
-#mainNav a:hover::after {
+#mainNav a:hover::after,
+#mainNav .nav-active a::after {
   opacity: 1;
 }

_includes/header.njk

@@ -4,7 +4,14 @@
       <img alt="ESE {{year}} Logo" src="/static/ESELogo24.svg">
     </a>
     <nav id="mainNav">
-      {{ collections.mainNav | pageLang | eleventyNavigation | eleventyNavigationToHtml | safe }}
+      {% set navPages = collections.mainNav | pageLang | eleventyNavigation %}
+      <ul>
+        {%- for entry in navPages -%}
+        <li{% if entry.url == page.url %} class="nav-active"{% endif %}>
+          <a href="{{ entry.url }}">{{ entry.title }}</a>
+        </li>
+        {%- endfor %}
+      </ul>
     </nav>
   </div>
 </header>