avoid transition flash on page load

src/_includes/partials/main-nav.njk

@@ -9,7 +9,7 @@
   {% endif %}"
   aria-label="{{ meta.navigation.ariaTop }}"
 >
-  <ul class="cluster" role="list">
+  <ul class="cluster" role="list" no-flash>
     {% for item in navigation.top %}
       <li>
         <a

src/assets/css/global/blocks/main-nav.css

@@ -42,6 +42,10 @@
   visibility: var(--nav-list-visibility);
 }
 
+.mainnav ul[no-flash] {
+  transition: none;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .mainnav ul {
     --nav-list-transform: translateX(100%);

src/assets/scripts/bundle/nav-drawer.js

@@ -30,4 +30,11 @@ document.addEventListener('click', e => {
   }
 });
 
+// avoid drawer flashing on page load
+document.addEventListener('DOMContentLoaded', function () {
+  setTimeout(() => {
+    list.removeAttribute('no-flash');
+  }, 100);
+});
+
 nav.insertBefore(burgerClone, list);