nav.html: Better loading performance while waiting for JS (#644)

spotlightpa · Apr 30, 2024 · 307d2ec · 307d2ec
1 parent 50504e0
commit 307d2ec
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/layouts/partials/tw/banner.html b/layouts/partials/tw/banner.html
@@ -5,7 +5,6 @@
   <section
     class="px-2 py-2 font-sans font-medium leading-tight md:leading-none"
     data-ga-category="banner"
-    x-cloak
     x-show="atTop"
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0 scale-10"

diff --git a/layouts/partials/tw/nav.html b/layouts/partials/tw/nav.html
@@ -3,7 +3,7 @@
 </a>
 
 <div
-  class="top-0 border-b border-black bg-beige font-sans"
+  class="top-0 border-b border-black bg-beige font-sans transition-all sm:h-[145px] md:h-[165px]"
   x-data="{ isOpen: false }"
   :class="{ 'shadow-lg sm:mb-[81px] sm:h-16 md:mb-[93px] md:h-[73px]': !atTop, 'sm:h-[145px] md:h-[165px] transition-all': atTop }"
   data-ga-category="top-banner"
@@ -20,7 +20,6 @@
       <a id="top" class="flex justify-start" href="/" data-ga-category="logo">
         <svg
           class="-sm:mr-1 h-8 w-32 pb-[2px] sm:h-12 sm:w-[13rem] md:mr-0 md:h-14 md:w-[15rem]"
-          x-cloak
           x-show="atTop"
           x-transition:enter="transition ease-out duration-150"
           x-transition:enter-start="opacity-0 scale-10"
@@ -120,6 +119,14 @@ <h3 class="font-bold uppercase tracking-wide hover:underline">
         </div>
       </div>
 
+      <!-- no JS fallback link to footer -->
+      <a
+        class="no-js:flex sm-w-1/2 group relative z-40 mx-0 hidden flex-row items-center gap-1 self-stretch px-4 py-2 sm:px-0"
+        href="#footer"
+      >
+        {{ template "nav-hamburger-button" . }}
+      </a>
+
       <button
         id="hamburger-button"
         class="no-js:hidden sm-w-1/2 group relative z-40 mx-0 flex flex-row items-center gap-1 self-stretch px-4 py-2 sm:px-0"
@@ -206,7 +213,6 @@ <h3 class="font-bold uppercase tracking-wide hover:underline">
       flex-0 order-1 -mx-3 -mb-3 mt-2 w-screen border-b border-t border-black bg-white py-3
       text-center text-xs font-extrabold leading-none tracking-wide sm:m-0 sm:flex sm:justify-center sm:border-0 sm:bg-transparent md:text-base xl:text-base
       "
-      x-cloak
       x-show="atTop"
       x-transition:enter="transition ease-out duration-150"
       x-transition:enter-start="opacity-0 scale-10"
@@ -221,7 +227,6 @@ <h3 class="font-bold uppercase tracking-wide hover:underline">
 
   <nav
     class="hidden h-11 border-t bg-white font-sans sm:block"
-    x-cloak
     x-show="atTop"
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0 scale-10"
@@ -252,14 +257,6 @@ <h3 class="font-bold uppercase tracking-wide hover:underline">
           </li>
         {{ end }}
       </ul>
-
-      <!-- no JS fallback link to footer -->
-      <a
-        class="no-js:flex group z-40 order-1 mx-0 flex-[0_1_70px] flex-row items-center gap-1 self-stretch text-sm font-bold leading-none tracking-wide"
-        href="#footer"
-      >
-        {{ template "nav-hamburger-button" . }}
-      </a>
     </div>
   </nav>
 </div>