fix (hack): flash of main nav when drawer activated

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 %}

src/assets/css/local/nav-main-drawer-cls.css

@@ -0,0 +1,7 @@
+@media (scripting: enabled) {
+  @media screen(ltnavigation) {
+    .mainnav ul {
+      display: none;
+    }
+  }
+}

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);

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,