fix the navigation mess

src/_includes/partials/main-nav.njk

@@ -1,7 +1,14 @@
 <!-- toggle drawer menu in _data/meta.js -->
 {% set drawerNav = meta.navigation.drawerNav %}
 
-<nav id="mainnav" class="mainnav" aria-label="{{ meta.navigation.ariaTop }}">
+<nav
+  id="mainnav"
+  class="mainnav
+	{% if drawerNav %}
+    drawernav
+  {% endif %}"
+  aria-label="{{ meta.navigation.ariaTop }}"
+>
   <ul class="cluster" role="list">
     {% for item in navigation.top %}
       <li>
@@ -49,15 +56,15 @@
 {% endif %}
 
 {% css "inline" %}
+  {% include "css/nav-pills.css" %}
   {% if drawerNav %}
     {% include "css/nav-drawer.css" %}
-  {% else %}
-    {% include "css/nav-pills.css" %}
   {% endif %}
+  {% include "css/nav-desktop.css" %}
 {% endcss %}
 
 {% if drawerNav %}
   {% js "defer" %}
-    {% include "scripts/nav-drawer-inline.js" %}
+    {% include "scripts/nav-drawer.js" %}
   {% endjs %}
 {% endif %}

src/assets/css/bundle/nav-desktop.css

@@ -0,0 +1,47 @@
+@media screen(navigation) {
+  .mainnav {
+    --nav-button-display: none;
+    --nav-position: static;
+  }
+
+  .mainnav ul {
+    --list-background: transparent;
+    --list-layout: row;
+    --list-position: static;
+    --list-height: auto;
+    --list-width: 100%;
+    --list-shadow: none;
+    --list-transform: none;
+    --list-visibility: visible;
+    --list-width: auto;
+    --list-block-padding: 0;
+    --list-inline-padding: 0;
+  }
+
+  .mainnav a {
+    --item-padding: var(--space-xs) 0.2em;
+    --item-border-color: transparent;
+    --item-background-color: transparent;
+    --item-text-decoration: transparent;
+    --item-text-color: var(--color-text);
+    text-decoration-line: underline;
+    text-decoration-color: var(--item-text-decoration, transparent);
+    text-decoration-thickness: 3px;
+    text-underline-offset: 0.2em;
+  }
+
+  .mainnav a:where(:hover, :focus) {
+    --item-background-color: transparent;
+    --item-text-color: var(--color-text);
+    --item-text-decoration: var(--color-text);
+  }
+
+  /* Change border-color and color for the active page */
+  .mainnav [aria-current='page'],
+  .mainnav [data-state='active'] {
+    --item-border-color: transparent;
+    --item-background-color: transparent;
+    --item-text-color: var(--color-primary);
+    --item-text-decoration: var(--color-primary);
+  }
+}

src/assets/css/bundle/nav-drawer.css

@@ -1,156 +1,90 @@
-/* Remove default list styling and create layout for list */
-.mainnav ul {
-  list-style: none;
-  margin: 0;
-  --gutter: var(--space-xs);
-  line-height: 0.5em;
-  padding-block-end: var(--space-s);
-}
-
-/* drawerif JS enabled */
 @media (scripting: enabled) {
   .mainnav {
-    position: var(--nav-position, absolute);
+    --nav-position: fixed;
-    inset-inline-end: 0.1rem;
+    inset-inline-end: 1em;
   }
 
   .mainnav ul {
+    --gutter: var(--space-xs);
     --cluster-vertical-alignment: normal;
+    --list-block-padding: var(--space-2xl);
+    --list-inline-padding: var(--space-s);
     z-index: 1;
-    padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
+    background: var(--list-background, var(--color-bg));
-    background: var(--nav-list-background, var(--color-bg));
+    box-shadow: var(--list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
-    box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
+    flex-direction: var(--list-layout, column);
-    flex-direction: var(--nav-list-layout, column);
+    block-size: var(--list-height, 100vh);
-    block-size: var(--nav-list-height, 100vh);
+    position: var(--list-position, fixed);
-    position: var(--nav-list-position, fixed);
     inset-block-start: 0;
     inset-inline-end: 0;
-    inline-size: var(--nav-list-width, min(18rem, 100vw));
+    inline-size: var(--list-width, min(18rem, 100vw));
-    visibility: var(--nav-list-visibility, visible);
+    visibility: var(--list-visibility, visible);
   }
-}
 
-.mainnav [aria-expanded='false'] + ul {
+  .mainnav :where([aria-expanded='false']) + ul {
-  transform: var(--nav-list-transform, translateX(100%));
+    transform: var(--list-transform, translateX(100%));
-  visibility: var(--nav-list-visibility, hidden);
+    --list-visibility: hidden;
-}
+  }
+
+  /* animates ul only when opening to avoid flash on page load, svg always */
+  @media (prefers-reduced-motion: no-preference) {
+    .mainnav [aria-expanded='true'] + ul,
+    .mainnav svg {
+      transition:
+        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+        visibility 0.05s linear;
+    }
+  }
+
+  .mainnav [aria-expanded='true'] + ul {
+    padding-top: var(--space-2xl);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .mainnav button {
+    display: var(--nav-button-display, flex);
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    padding: var(--space-2xs) 0;
+  }
+
+  .mainnav span {
+    font-weight: var(--font-extra-bold);
+    text-transform: uppercase;
+    padding-inline-end: 0.1em;
+    font-size: var(--size-step-min-1);
+    font-family: var(--font-display);
+  }
 
-/* animates ul only when opening to avoid flash on page load, svg always */
-@media (prefers-reduced-motion: no-preference) {
-  .mainnav [aria-expanded='true'] + ul,
   .mainnav svg {
-    transition:
+    block-size: 2ex;
-      transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+    inline-size: auto;
-      visibility 0.05s linear;
+    color: var(--color-text);
-  }
+    stroke-width: 2.5;
-}
-
-.mainnav [aria-expanded='true'] + ul {
-  padding-top: var(--space-2xl);
-}
-
-/* Basic link styling */
-.mainnav a {
-  --text-color: var(--color-text);
-  --background-color: var(--color-bg);
-  --border-color: transparent;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  padding: var(--anchor-padding, var(--space-s));
-  text-decoration: none;
-  display: block;
-
-  border: 1px solid var(--border-color);
-}
-
-/* Change the border-color on :hover and :focus */
-.mainnav a:where(:hover, :focus) {
-  --background-color: var(--color-bg-accent);
-  --text-color: var(--color-text-accent);
-  --border-color: var(--color-bg-accent);
-}
-
-/* Change border-color and color for the active page */
-.mainnav [aria-current='page'],
-.mainnav [data-state='active'] {
-  --background-color: var(--color-bg-accent);
-  --text-color: var(--color-text);
-  --border-color: var(--color-bg-accent);
-}
-
-/* Reset button styling */
-.mainnav button {
-  all: unset;
-  display: var(--nav-button-display, flex);
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  cursor: pointer;
-  align-items: center;
-  padding: var(--space-xs) 0;
-}
-
-.mainnav span {
-  font-size: var(--size-step-min-1);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  padding-inline-end: var(--space-2xs);
-}
-
-.mainnav svg {
-  block-size: 100%;
-  inline-size: auto;
-  transform: translateY(-0.1em);
-  color: var(--color-text);
-}
-
-.mainnav [aria-expanded='true'] svg {
-  transform: var(--nav-list-rotate, rotate(45deg));
-}
-
-@media screen(navigation) {
-  .mainnav {
-    --nav-button-display: none;
-    --nav-position: static;
   }
 
-  .mainnav ul {
+  .mainnav [aria-expanded='true'] svg {
-    --nav-list-background: transparent;
+    transform: var(--list-rotate, rotate(45deg));
-    --nav-list-layout: row;
-    --nav-list-position: static;
-    --nav-list-padding: 0;
-    --nav-list-height: auto;
-    --nav-list-width: 100%;
-    --nav-list-shadow: none;
-    --nav-list-transform: none;
-    --nav-list-visibility: visible;
   }
 
   .mainnav a {
-    --anchor-padding: var(--space-xs) 0.2em;
+    --item-border-color: transparent;
-    --text-color: var(--color-text);
+    --item-padding: var(--space-m) var(--space-xs);
-    --background-color: transparent;
+    --item-background-color: transparent;
-    --border-color: transparent;
-    --text-decoration: transparent;
-    text-decoration-line: underline;
-    text-decoration-color: var(--text-decoration, transparent);
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.2em;
   }
 
   .mainnav a:where(:hover, :focus) {
-    --text-color: var(--color-text);
+    --item-background-color: var(--color-bg-accent);
-    --background-color: transparent;
+    --item-text-color: var(--color-text);
-    --border-color: transparent;
+    --item-border-color: transparent;
-    --text-decoration: var(--color-text-accent);
   }
 
-  /* Change border-color and color for the active page */
   .mainnav [aria-current='page'],
   .mainnav [data-state='active'] {
-    --text-color: var(--color-primary);
+    --item-border-color: transparent;
-    --background-color: transparent;
+    --item-background-color: var(--color-primary);
-    --border-color: transparent;
+    --item-text-color: var(--color-light);
-    --text-decoration: var(--color-primary);
   }
 }

src/assets/css/bundle/nav-pills.css

@@ -1,72 +1,43 @@
-/* Basic link styling */
+.mainnav {
+  --gutter: var(--space-s);
+  position: var(--nav-position, relative);
+}
+
 .mainnav ul {
   --gutter: var(--space-xs);
-  list-style: none;
+  --list-block-padding: var(--space-s);
+  --list-inline-padding: 0;
   margin: 0;
   line-height: 0.5em;
-  padding-block-end: var(--space-s);
+  padding-block: var(--list-block-padding);
+  padding-inline: var(--list-inline-padding);
 }
 
 .mainnav a {
-  --text-color: var(--color-text);
+  --item-text-color: var(--color-text);
-  --background-color: var(--color-bg);
+  --item-background-color: var(--color-bg);
-  --border-color: var(--color-bg-accent-2);
+  --item-border-color: var(--color-bg-accent-2);
-  background-color: var(--background-color);
+  --item-padding: var(--space-s);
-  color: var(--text-color);
+  background-color: var(--item-background-color);
-  padding: var(--space-s);
+  color: var(--item-text-color);
+  padding: var(--item-padding);
   text-decoration: none;
   display: block;
   border-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--item-border-color);
 }
 
 /* Change the border-color on :hover and :focus */
 .mainnav a:where(:hover, :focus) {
-  --background-color: var(--color-text);
+  --item-background-color: var(--color-text);
-  --text-color: var(--color-bg);
+  --item-text-color: var(--color-bg);
-  --border-color: var(--color-bg);
+  --item-border-color: var(--color-bg);
 }
 
 /* Change border-color and color for the active page. data-state='active' if a child is active. */
 .mainnav [aria-current='page'],
 .mainnav [data-state='active'] {
-  --background-color: var(--color-text);
+  --item-background-color: var(--color-text);
-  --text-color: var(--color-bg);
+  --item-border-color: var(--color-bg);
-  --border-color: var(--color-bg);
+  --item-text-color: var(--color-bg);
-}
-
-@media screen(navigation) {
-  /* Basic link styling */
-  .mainnav ul {
-    padding-block-end: 0;
-  }
-
-  .mainnav a {
-    --text-color: var(--color-text);
-    --background-color: transparent;
-    --border-color: transparent;
-    --text-decoration: transparent;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    padding: var(--space-xs) 0.2em;
-    text-decoration-line: underline;
-    text-decoration-color: var(--text-decoration, transparent);
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.2em;
-  }
-
-  /* Change the border-color on :hover and :focus */
-  .mainnav a:where(:hover, :focus) {
-    --text-decoration: var(--color-text-accent);
-    --text-color: var(--color-text);
-    --background-color: transparent;
-  }
-
-  /* Change border-color and color for the active page */
-  .mainnav [aria-current='page'],
-  .mainnav [data-state='active'] {
-    --text-decoration: var(--color-primary);
-    --text-color: var(--color-primary);
-    --background-color: transparent;
-  }
 }