refactor main nav

_includes/header.css

@@ -30,7 +30,7 @@ header {
   margin-left: 1.9rem;
 }
 
-#mainNav a {
+.nav-item {
   position: relative;
   font-size: 16px;
   font-family: Aileron;
@@ -41,7 +41,7 @@ header {
   text-decoration: none;
 }
 
-#mainNav a::after {
+.nav-item::after {
   content: "";
   position: absolute;
   background: var(--color-primary);
@@ -53,7 +53,7 @@ header {
   transition: opacity .3s ease-out;
 }
 
-#mainNav a:hover::after,
-#mainNav .nav-active a::after {
+.nav-item:hover::after,
+.nav-item.active::after {
   opacity: 1;
 }

_includes/header.njk

@@ -7,8 +7,9 @@
       {% 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>
+          <a class="nav-item {%- if entry.url == page.url %} active{% endif %}"
+            href="{{ entry.url }}">{{ entry.title }}</a>
         </li>
         {%- endfor %}
       </ul>