From 525525dcb3e68b0375a7000a6ebae5cfb2777345 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Thu, 19 Sep 2024 10:57:40 +0200
Subject: [PATCH] avoid transition flash on page load

---
 src/_includes/partials/main-nav.njk       | 2 +-
 src/assets/css/global/blocks/main-nav.css | 4 ++++
 src/assets/scripts/bundle/nav-drawer.js   | 7 +++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/_includes/partials/main-nav.njk b/src/_includes/partials/main-nav.njk
index d4c5660..0397041 100644
--- a/src/_includes/partials/main-nav.njk
+++ b/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
diff --git a/src/assets/css/global/blocks/main-nav.css b/src/assets/css/global/blocks/main-nav.css
index df44512..d7b33b9 100644
--- a/src/assets/css/global/blocks/main-nav.css
+++ b/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%);
diff --git a/src/assets/scripts/bundle/nav-drawer.js b/src/assets/scripts/bundle/nav-drawer.js
index 4e2ac97..b259b86 100644
--- a/src/assets/scripts/bundle/nav-drawer.js
+++ b/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);