tecitheme 0.2.0 → 0.2.2

package/components/Header.svelte

@@ -1,9 +1,9 @@
 <script>
-  import Icon from './Icon.svelte';
-  import { slide } from 'svelte/transition';
-  import { cubicIn, cubicOut } from 'svelte/easing';
+  import Icon from "./Icon.svelte";
+  import { slide } from "svelte/transition";
+  import { cubicIn, cubicOut } from "svelte/easing";
 
-  let openMenu = '';
+  let openMenu = "";
 
   export function clickOutside(node) {
     const handleClick = (event) => {
@@ -11,31 +11,31 @@
         !node.contains(event.target) &&
         event.target.innerText.toLowerCase() != node.parentElement.id
       ) {
-        node.dispatchEvent(new CustomEvent('outclick'));
+        node.dispatchEvent(new CustomEvent("outclick"));
       }
     };
-    document.addEventListener('click', handleClick, true);
+    document.addEventListener("click", handleClick, true);
     return {
       destroy() {
-        document.removeEventListener('click', handleClick, true);
+        document.removeEventListener("click", handleClick, true);
       },
     };
   }
 
   function handleEscape({ key }) {
-    if (key === 'Escape') {
-      openMenu = '';
+    if (key === "Escape") {
+      openMenu = "";
     }
   }
 </script>
 
-<svelte:window on:keyup="{handleEscape}" />
+<svelte:window on:keyup={handleEscape} />
 
 <header class="relative bg-white">
   <div
-    class="pointer-events-none absolute inset-0 z-30 shadow"
     aria-hidden="true"
-  ></div>
+    class="pointer-events-none absolute inset-0 z-30 shadow"
+  />
   <div
     class="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
   >
@@ -52,12 +52,16 @@
       <nav class="flex md:space-x-6 lg:space-x-10">
         <!-- Products -->
         <div id="products">
-          <button type="button"
-            on:click={() => (openMenu == 'products')?(openMenu = ''):(openMenu = 'products')}
-            class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
-            aria-expanded="{openMenu == 'products'}"
+          <button
+            type="button"
+            on:click={() =>
+              openMenu == "products"
+                ? (openMenu = "")
+                : (openMenu = "products")}
+            class="group inline-flex items-center bg-white text-left text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            aria-expanded={openMenu == "products"}
           >
-            <span class:text-gray-900="{openMenu == 'products'}">Products</span>
+            <span class:text-gray-900={openMenu == "products"}>Products</span>
             <svg
               class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ==
               'products'
@@ -71,21 +75,23 @@
               <path
                 fill-rule="evenodd"
                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              />
             </svg>
           </button>
 
           <!-- Flyout menu -->
-          {#if openMenu == 'products'}
-            <div 
-              class="absolute inset-x-0 top-full z-10 transform bg-white shadow-lg"
+          {#if openMenu == "products"}
+            <div
+              class="absolute inset-x-0 top-full z-10 transform bg-white text-left shadow-lg"
               use:clickOutside
-              on:outclick="{() => (openMenu = '')}"
-              in:slide="{{ duration: 250, easing: cubicOut }}"
-              out:slide="{{ duration: 150, easing: cubicIn }}"
+              on:outclick={() => (openMenu = "")}
+              in:slide={{ duration: 250, easing: cubicOut }}
+              out:slide={{ duration: 150, easing: cubicIn }}
             >
-              <div on:click={() => (openMenu = '')}
-                class="mx-auto grid max-w-7xl gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8"
+              <button
+                on:click={() => (openMenu = "")}
+                class="mx-auto grid max-w-7xl gap-y-8 px-4 py-8 text-left sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/pyrosim/"
@@ -175,12 +181,13 @@
                     </div>
                   </div>
                 </a>
-              </div>
+              </button>
 
               <!-- Action Buttons -->
-              <div class="relative bg-gray-50">
-                <div on:click="{() => (openMenu = '')}"
-                  class="mx-auto max-w-7xl space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8"
+              <div class="relative bg-gray-50 text-left">
+                <button
+                  on:click={() => (openMenu = "")}
+                  class="max-w-7xl space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8"
                 >
                   <div class="flow-root">
                     <a
@@ -199,7 +206,7 @@
                           stroke-linejoin="round"
                           stroke-width="2"
                           d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-                        ></path>
+                        />
                       </svg>
                       <span class="ml-3">Order Online</span>
                     </a>
@@ -222,7 +229,7 @@
                           stroke-linejoin="round"
                           stroke-width="2"
                           d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                        ></path>
+                        />
                       </svg>
                       <span class="ml-3">30-day Trial</span>
                     </a>
@@ -245,12 +252,12 @@
                           stroke-linejoin="round"
                           stroke-width="2"
                           d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                        ></path>
+                        />
                       </svg>
                       <span class="ml-3">Contact Sales</span>
                     </a>
                   </div>
-                </div>
+                </button>
               </div>
             </div>
           {/if}
@@ -260,12 +267,12 @@
         <div id="support" class="relative">
           <button
             type="button"
-            on:click="{() =>
-              openMenu == 'support' ? (openMenu = '') : (openMenu = 'support')}"
+            on:click={() =>
+              openMenu == "support" ? (openMenu = "") : (openMenu = "support")}
             class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
-            aria-expanded="{openMenu == 'support'}"
+            aria-expanded={openMenu == "support"}
           >
-            <span class:text-gray-900="{openMenu == 'support'}">Support</span>
+            <span class:text-gray-900={openMenu == "support"}>Support</span>
             <svg
               class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ===
               'support'
@@ -279,20 +286,22 @@
               <path
                 fill-rule="evenodd"
                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              />
             </svg>
           </button>
 
-          {#if openMenu == 'support'}
+          {#if openMenu == "support"}
             <div
-              class="absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
+              class="absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 text-left shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
               use:clickOutside
-              on:outclick="{() => (openMenu = '')}"
-              in:slide="{{ duration: 250, easing: cubicOut }}"
-              out:slide="{{ duration: 150, easing: cubicIn }}"
+              on:outclick={() => (openMenu = "")}
+              in:slide={{ duration: 250, easing: cubicOut }}
+              out:slide={{ duration: 150, easing: cubicIn }}
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button
+                on:click={() => (openMenu = "")}
+                class="relative grid w-full gap-6 bg-white px-5 py-6 text-left sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://support.thunderheadeng.com/docs/"
@@ -310,7 +319,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">
@@ -338,7 +347,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Tutorials</p>
@@ -364,7 +373,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">
@@ -392,7 +401,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">FAQs</p>
@@ -401,9 +410,10 @@
                     </p>
                   </div>
                 </a>
-              </div>
-              <div on:click="{() => (openMenu = '')}"
-                class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
+              </button>
+              <button
+                on:click={() => (openMenu = "")}
+                class="w-full space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
                   <a
@@ -423,7 +433,7 @@
                         stroke-linejoin="round"
                         stroke-width="2"
                         d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                      ></path>
+                      />
                     </svg>
                     <span class="ml-3">User Forum</span>
                   </a>
@@ -446,12 +456,12 @@
                         stroke-linejoin="round"
                         stroke-width="2"
                         d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                      ></path>
+                      />
                     </svg>
                     <span class="ml-3">Contact Support</span>
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -460,12 +470,12 @@
         <div id="events" class="relative">
           <button
             type="button"
-            on:click="{() =>
-              openMenu == 'events' ? (openMenu = '') : (openMenu = 'events')}"
+            on:click={() =>
+              openMenu == "events" ? (openMenu = "") : (openMenu = "events")}
             class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
-            aria-expanded="{openMenu == 'events'}"
+            aria-expanded={openMenu == "events"}
           >
-            <span class:text-gray-900="{openMenu == 'events'}">Events</span>
+            <span class:text-gray-900={openMenu == "events"}>Events</span>
             <svg
               class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-900 {openMenu ===
               'events'
@@ -479,20 +489,22 @@
               <path
                 fill-rule="evenodd"
                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              />
             </svg>
           </button>
 
-          {#if openMenu == 'events'}
+          {#if openMenu == "events"}
             <div
               class="absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
               use:clickOutside
-              on:outclick="{() => (openMenu = '')}"
-              in:slide="{{ duration: 250, easing: cubicOut }}"
-              out:slide="{{ duration: 150, easing: cubicIn }}"
+              on:outclick={() => (openMenu = "")}
+              in:slide={{ duration: 250, easing: cubicOut }}
+              out:slide={{ duration: 150, easing: cubicIn }}
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button
+                on:click={() => (openMenu = "")}
+                class="relative grid w-full gap-6 bg-white px-5 py-6 text-left sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/training/"
@@ -510,7 +522,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Calendar</p>
@@ -536,7 +548,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">FEMTC</p>
@@ -562,7 +574,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Training</p>
@@ -571,9 +583,10 @@
                     </p>
                   </div>
                 </a>
-              </div>
-              <div on:click="{() => (openMenu = '')}"
-                class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
+              </button>
+              <button
+                on:click={() => (openMenu = "")}
+                class="w-full space-y-6 bg-gray-50 px-5 py-5 text-left sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
                   <a
@@ -592,7 +605,7 @@
                         stroke-linejoin="round"
                         stroke-width="2"
                         d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                      ></path>
+                      />
                     </svg>
                     <span class="ml-3">Register</span>
                   </a>
@@ -615,12 +628,12 @@
                         stroke-linejoin="round"
                         stroke-width="2"
                         d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                      ></path>
+                      />
                     </svg>
                     <span class="ml-3">Contact Training</span>
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -629,12 +642,12 @@
         <div id="company" class="relative">
           <button
             type="button"
-            on:click="{() =>
-              openMenu == 'company' ? (openMenu = '') : (openMenu = 'company')}"
+            on:click={() =>
+              openMenu == "company" ? (openMenu = "") : (openMenu = "company")}
             class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
-            aria-expanded="{openMenu == 'company'}"
+            aria-expanded={openMenu == "company"}
           >
-            <span class:text-gray-900="{openMenu == 'company'}">Company</span>
+            <span class:text-gray-900={openMenu == "company"}>Company</span>
             <svg
               class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ===
               'company'
@@ -648,20 +661,22 @@
               <path
                 fill-rule="evenodd"
                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              />
             </svg>
           </button>
 
-          {#if openMenu == 'company'}
+          {#if openMenu == "company"}
             <div
               class="absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
               use:clickOutside
-              on:outclick="{() => (openMenu = '')}"
-              in:slide="{{ duration: 250, easing: cubicOut }}"
-              out:slide="{{ duration: 150, easing: cubicIn }}"
+              on:outclick={() => (openMenu = "")}
+              in:slide={{ duration: 250, easing: cubicOut }}
+              out:slide={{ duration: 150, easing: cubicIn }}
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button
+                on:click={() => (openMenu = "")}
+                class="relative grid w-full gap-6 bg-white px-5 py-6 text-left sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/about/"
@@ -679,7 +694,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">About</p>
@@ -705,7 +720,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">News</p>
@@ -731,7 +746,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Jobs</p>
@@ -757,7 +772,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-                    ></path>
+                    />
                   </svg>
                   <div class="ml-4">
                     <p class="text-base font-medium text-gray-900">Partners</p>
@@ -766,7 +781,7 @@
                     </p>
                   </div>
                 </a>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -798,7 +813,8 @@
                 <path
                   fill-rule="evenodd"
                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  clip-rule="evenodd"></path>
+                  clip-rule="evenodd"
+                />
               </svg>
             </div>
             <input
@@ -833,7 +849,7 @@
                 stroke-linejoin="round"
                 stroke-width="2"
                 d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-              ></path>
+              />
             </svg>
           </a>
         </div>
@@ -854,7 +870,7 @@
                 stroke-linejoin="round"
                 stroke-width="2"
                 d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
+              />
             </svg>
           </a>
         </div>
@@ -865,9 +881,9 @@
     <div class="md:hidden">
       <button
         type="button"
-        on:click="{() => (openMenu = 'mobile')}"
+        on:click={() => (openMenu = "mobile")}
         class="inline-flex items-center justify-center border border-gray-200 bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-light"
-        aria-expanded="{openMenu == 'mobile'}"
+        aria-expanded={openMenu == "mobile"}
       >
         <span class="sr-only">Open mobile menu</span>
 
@@ -883,24 +899,29 @@
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16"></path>
+            d="M4 6h16M4 12h16M4 18h16"
+          />
         </svg>
       </button>
     </div>
   </div>
 
   <!-- Mobile menu, show/hide based on mobile menu state.-->
-  {#if openMenu == 'mobile'}
+  {#if openMenu == "mobile"}
     <div
       class="absolute inset-x-0 top-0 z-30 divide-y-2 divide-gray-50 bg-white shadow-lg ring-1 ring-black ring-opacity-5 md:hidden"
       use:clickOutside
-      on:outclick="{() => (openMenu = '')}"
-      in:slide="{{ duration: 250, easing: cubicOut }}"
-      out:slide="{{ duration: 150, easing: cubicIn }}"
+      on:outclick={() => (openMenu = "")}
+      in:slide={{ duration: 250, easing: cubicOut }}
+      out:slide={{ duration: 150, easing: cubicIn }}
     >
       <div class="px-4 pt-5 pb-6 sm:pb-8">
         <div class="flex items-center justify-between">
-          <a on:click="{() => (openMenu = '')}" class="block" href="https://www.thunderheadeng.com">
+          <a
+            on:click={() => (openMenu = "")}
+            class="block"
+            href="https://www.thunderheadeng.com"
+          >
             <img
               class="h-10 w-auto"
               src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
@@ -910,7 +931,7 @@
 
           <button
             type="button"
-            on:click="{() => (openMenu = '')}"
+            on:click={() => (openMenu = "")}
             class="inline-flex items-center justify-center border border-gray-200 bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-light"
           >
             <span class="sr-only">Close menu</span>
@@ -927,11 +948,12 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"></path>
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
-        <div on:click="{() => (openMenu = '')}" class="mt-6 sm:mt-8">
+        <button on:click={() => (openMenu = "")} class="mt-6 w-full sm:mt-8">
           <nav>
             <div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
               <a href="/" class="-m-3 flex items-center p-3 hover:bg-gray-50">
@@ -950,7 +972,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                    ></path>
+                    />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900">
@@ -976,7 +998,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
-                    ></path>
+                    />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900">
@@ -1002,7 +1024,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    ></path>
+                    />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900">
@@ -1027,7 +1049,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
-                    ></path></svg
+                    /></svg
                   >
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900">
@@ -1053,7 +1075,7 @@
                       stroke-linejoin="round"
                       stroke-width="2"
                       d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
+                    />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900">
@@ -1062,9 +1084,12 @@
               </a>
             </div>
           </nav>
-        </div>
+        </button>
       </div>
-      <div on:click="{() => (openMenu = '')}" class="py-6 px-5">
+      <button
+        on:click={() => (openMenu = "")}
+        class="w-full py-6 px-5 text-left"
+      >
         <div class="grid grid-cols-2 gap-4">
           <div class="flow-root">
             <a
@@ -1083,7 +1108,7 @@
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
-                ></path>
+                />
               </svg>
               <span class="ml-3">News</span>
             </a>
@@ -1105,7 +1130,7 @@
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                ></path>
+                />
               </svg>
               <span class="ml-3">Release Notes</span>
             </a>
@@ -1127,7 +1152,7 @@
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-                ></path>
+                />
               </svg>
               <span class="ml-3">Order Online</span>
             </a>
@@ -1148,7 +1173,8 @@
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
-                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               <span class="ml-3">30-day Trial</span>
             </a>
@@ -1170,7 +1196,7 @@
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                ></path>
+                />
               </svg>
               <span class="ml-3">Sales</span>
             </a>
@@ -1192,13 +1218,13 @@
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                ></path>
+                />
               </svg>
               <span class="ml-3">Support</span>
             </a>
           </div>
         </div>
-      </div>
+      </button>
     </div>
   {/if}
 </header>