From cceb78fa71615b33a5e1a6be27400349f660bb88 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Sat, 22 Mar 2025 09:58:42 +0100
Subject: [PATCH] fix (hack): flash of  main nav when drawer activated

---
 src/_includes/partials/main-nav.njk          | 4 ++++
 src/assets/css/local/nav-main-drawer-cls.css | 7 +++++++
 src/assets/scripts/bundle/nav-drawer.js      | 2 ++
 tailwind.config.js                           | 1 +
 4 files changed, 14 insertions(+)
 create mode 100644 src/assets/css/local/nav-main-drawer-cls.css

diff --git a/src/_includes/partials/main-nav.njk b/src/_includes/partials/main-nav.njk
index 0c3fec5..dfc18e2 100644
--- a/src/_includes/partials/main-nav.njk
+++ b/src/_includes/partials/main-nav.njk
@@ -47,6 +47,10 @@
 {% endif %}
 
 {% if drawerNav %}
+  {% css "local" %}
+    {% include "css/nav-main-drawer-cls.css" %}
+  {% endcss %}
+
   {% js "defer" %}
     {% include "scripts/nav-drawer.js" %}
   {% endjs %}
diff --git a/src/assets/css/local/nav-main-drawer-cls.css b/src/assets/css/local/nav-main-drawer-cls.css
new file mode 100644
index 0000000..84cf8bf
--- /dev/null
+++ b/src/assets/css/local/nav-main-drawer-cls.css
@@ -0,0 +1,7 @@
+@media (scripting: enabled) {
+  @media screen(ltnavigation) {
+    .mainnav ul {
+      display: none;
+    }
+  }
+}
diff --git a/src/assets/scripts/bundle/nav-drawer.js b/src/assets/scripts/bundle/nav-drawer.js
index 721e912..4372759 100644
--- a/src/assets/scripts/bundle/nav-drawer.js
+++ b/src/assets/scripts/bundle/nav-drawer.js
@@ -5,6 +5,8 @@ const list = nav.querySelector('ul');
 const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
 const button = burgerClone.querySelector('button');
 
+list.style.setProperty('display', 'flex');
+
 button.addEventListener('click', e => {
   const isOpen = button.getAttribute('aria-expanded') === 'true';
   button.setAttribute('aria-expanded', !isOpen);
diff --git a/tailwind.config.js b/tailwind.config.js
index 59e3a12..918a7e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,7 @@ export default {
       ltsm: {max: `${viewportTokens.sm}px`},
       sm: `${viewportTokens.sm}px`,
       md: `${viewportTokens.md}px`,
+      ltnavigation: {max: `${viewportTokens.navigation}px`},
       navigation: `${viewportTokens.navigation}px`
     },
     colors,