tecitheme 0.8.1 → 0.9.0

package/dist/components/Header.svelte

@@ -0,0 +1,888 @@
+<script>
+  import Icon from "./Icon.svelte";
+  import { fade, slide } from "svelte/transition";
+  import { cubicIn, cubicOut } from "svelte/easing";
+
+  let openMenu = "";
+
+  export function clickOutside(node) {
+    const handleClick = (event) => {
+      if (
+        !node.contains(event.target) &&
+        event.target.innerText.toLowerCase() != node.parentElement.id
+      ) {
+        node.dispatchEvent(new CustomEvent("outclick"));
+      }
+    };
+    document.addEventListener("click", handleClick, true);
+    return {
+      destroy() {
+        document.removeEventListener("click", handleClick, true);
+      },
+    };
+  }
+
+  function handleEscape({ key }) {
+    if (key === "Escape") {
+      openMenu = "";
+    }
+  }
+</script>
+
+<svelte:window on:keyup={handleEscape} />
+
+<header id="menu" class="relative">
+  <div
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 z-50 shadow"
+  />
+  <div
+    class="relative mx-auto flex max-w-7xl items-center justify-between px-2 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
+  >
+    <!-- Nav Icon Linked to WWW Homepage -->
+    <div class="flex-shrink-0">
+      <a href="https://www.thunderheadeng.com" class="flex">
+        <span class="sr-only">Thunderhead Engineering</span>
+        <Icon classes="h-10 w-auto" />
+      </a>
+    </div>
+
+    <!-- Nav Menu -->
+    <div class="hidden md:flex md:flex-shrink-0 md:items-center md:justify-between">
+      <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-left text-base font-medium 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>
+            <svg
+              class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ==
+              'products'
+                ? 'rotate-180 text-gray-900'
+                : 'text-gray-400'}"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <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"
+              />
+            </svg>
+          </button>
+
+          <!-- Flyout menu -->
+          {#if openMenu == "products"}
+            <div
+              class="absolute inset-x-0 top-full z-50 transform bg-white text-left shadow-lg"
+              use:clickOutside
+              on:outclick={() => (openMenu = "")}
+              in:slide={{ duration: 250, easing: cubicOut }}
+              out:slide={{ duration: 150, easing: cubicIn }}
+            >
+              <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"
+              >
+                <!-- PyroSim -->
+                <a
+                  href="https://www.thunderheadeng.com/pyrosim"
+                  class="-m-3 flex flex-col justify-between p-3 hover:bg-gray-50"
+                >
+                  <div class="flex md:h-full lg:flex-col">
+                    <div class="flex-shrink-0">
+                      <Icon classes="h-12 w-auto" icon="pyrosim" />
+                    </div>
+                    <div
+                      class="ml-4 md:flex md:flex-1 md:flex-col md:justify-between lg:ml-0 lg:mt-4"
+                    >
+                      <!-- Main Card -->
+                      <div>
+                        <p class="text-base font-medium text-gray-900">
+                          PyroSim
+                        </p>
+                        <p class="mt-1 text-sm">
+                          Analyze fire control and smoke dissipation in various
+                          structures for fire protection and safety or
+                          investigation.
+                        </p>
+                      </div>
+
+                      <!-- Links -->
+                      <div class="mt-2 lg:mt-4 grid grid-cols-2 justify-end gap-y-2">
+
+                        <a href="https://support.thunderheadeng.com/docs/pyrosim/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Documentation <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/tutorials/pyrosim" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Tutorials <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/release-notes/pyrosim/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Download <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://training.thunderheadeng.com/courses/pyrosim-fundamentals" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Courses <span aria-hidden="true">&rarr;</span>
+                        </a>
+
+                      </div>
+
+                    </div>
+                  </div>
+                </a>
+
+                <!-- Pathfinder -->
+                <a
+                  href="https://www.thunderheadeng.com/pathfinder"
+                  class="-m-3 flex flex-col justify-between p-3 hover:bg-gray-50"
+                >
+                  <div class="flex md:h-full lg:flex-col">
+                    <div class="flex-shrink-0">
+                      <Icon classes="h-12 w-auto" icon="pathfinder" />
+                    </div>
+                    <div
+                      class="ml-4 md:flex md:flex-1 md:flex-col md:justify-between lg:ml-0 lg:mt-4"
+                    >
+                      <!-- Main Card -->
+                      <div>
+                        <p class="text-base font-medium text-gray-900">
+                          Pathfinder
+                        </p>
+                        <p class="mt-1 text-sm">
+                          Understand pedestrian egress and congestion hazards
+                          for fire protection and safety or urban planning.
+                        </p>
+                      </div>
+
+                      <!-- Links -->
+                      <div class="mt-2 lg:mt-4 grid grid-cols-2 justify-end gap-y-2">
+
+                        <a href="https://support.thunderheadeng.com/docs/pathfinder/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Documentation <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/tutorials/pathfinder" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Tutorials <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/release-notes/pathfinder/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Download <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://training.thunderheadeng.com/courses/pathfinder-fundamentals" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Courses <span aria-hidden="true">&rarr;</span>
+                        </a>
+
+                      </div>
+                    </div>
+                  </div>
+                </a>
+
+                <!-- Ventus -->
+                <a
+                  href="https://www.thunderheadeng.com/ventus"
+                  class="-m-3 flex flex-col justify-between p-3 hover:bg-gray-50"
+                >
+                  <div class="flex md:h-full lg:flex-col">
+                    <div class="flex-shrink-0">
+                      <Icon classes="h-12 w-auto" icon="ventus" />
+                    </div>
+                    <div
+                      class="ml-4 md:flex md:flex-1 md:flex-col md:justify-between lg:ml-0 lg:mt-4"
+                    >
+                      <!-- Main Card -->
+                      <div>
+                        <p class="text-base font-medium text-gray-900">
+                          Ventus
+                        </p>
+                        <p class="mt-1 text-sm">
+                          Create 3D pressurization models of smoke control solutions for stairwells, atria, and underground spaces.
+                        </p>
+                      </div>
+                      
+                      <!-- Links -->
+                      <div class="mt-2 lg:mt-4 grid grid-cols-2 justify-end gap-y-2">
+
+                        <a href="https://support.thunderheadeng.com/docs/ventus/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Documentation <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/tutorials/ventus" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Tutorials <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://support.thunderheadeng.com/release-notes/ventus/latest" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Download <span aria-hidden="true">&rarr;</span>
+                        </a>
+                        
+                        <a href="https://training.thunderheadeng.com/courses/ventus-fundamentals" class="text-teci-blue-light hover:text-teci-blue-dark font-medium">
+                          Courses <span aria-hidden="true">&rarr;</span>
+                        </a>
+
+                      </div>
+
+                    </div>
+                  </div>
+                </a>
+              </button>
+
+              <!-- Action Buttons -->
+              <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"
+                >
+
+                  <!-- Order Online -->
+                  <div class="flow-root">
+                    <a
+                      href="https://store2.thunderheadeng.com/cart"
+                      class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-6 w-6 flex-shrink-0 text-gray-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          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"
+                        />
+                      </svg>
+                      <span class="ml-3">Order Online</span>
+                    </a>
+                  </div>
+
+                  <!-- 30-Day Trial -->
+                  <div class="flow-root">
+                    <a
+                      href="https://store2.thunderheadeng.com/trial"
+                      class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-6 w-6 flex-shrink-0 text-gray-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          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>
+                  </div>
+
+                  <!-- Get Help -->
+                  <div class="flow-root">
+                    <a
+                      href="https://help.thunderheadeng.com/support/tickets/new"
+                      class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+                    >
+                      <svg 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        height="24" 
+                        viewBox="0 -960 960 960" 
+                        width="24" 
+                        fill="currentColor"
+                        class="h-6 w-6 flex-shrink-0 text-gray-400"
+                      >
+                        <path 
+                          d="M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z"
+                        />
+                      </svg>
+                      <span class="ml-3">Get Help</span>
+                    </a>
+                  </div>
+                </button>
+              </div>
+            </div>
+          {/if}
+        </div>
+
+        <!-- Company -->
+        <div id="company" class="relative">
+          <button
+            type="button"
+            on:click={() =>
+              openMenu == "company" ? (openMenu = "") : (openMenu = "company")}
+            class="group inline-flex items-center bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+            aria-expanded={openMenu == "company"}
+          >
+            <span class:text-gray-900={openMenu == "company"}>Company</span>
+            <svg
+              class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ===
+              'company'
+                ? 'rotate-180 text-gray-900'
+                : 'text-gray-400'}"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <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"
+              />
+            </svg>
+          </button>
+
+          {#if openMenu == "company"}
+            <div
+              class="absolute left-1/2 z-50 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 }}
+            >
+              <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"
+                  class="-m-3 flex items-start p-3 transition duration-150 ease-in-out hover:bg-gray-50"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 text-teci-blue-light"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                  <div class="ml-4">
+                    <p class="text-base font-medium text-gray-900">About</p>
+                    <p class="mt-1 text-sm">
+                      Learn more about Thunderhead Engineering
+                    </p>
+                  </div>
+                </a>
+
+                <a
+                  href="https://www.thunderheadeng.com/news"
+                  class="-m-3 flex items-start p-3 transition duration-150 ease-in-out hover:bg-gray-50"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 flex-shrink-0 text-teci-blue-light"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                  <div class="ml-4">
+                    <p class="text-base font-medium text-gray-900">News</p>
+                    <p class="mt-1 text-sm">
+                      Announcements for our products and services
+                    </p>
+                  </div>
+                </a>
+
+                <a
+                  href="https://www.thunderheadeng.com/job-openings"
+                  class="-m-3 flex items-start p-3 transition duration-150 ease-in-out hover:bg-gray-50"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 flex-shrink-0 text-teci-blue-light"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                  <div class="ml-4">
+                    <p class="text-base font-medium text-gray-900">Jobs</p>
+                    <p class="mt-1 text-sm">
+                      Become a part of the Thunderhead team
+                    </p>
+                  </div>
+                </a>
+
+                <a
+                  href="https://www.thunderheadeng.com/partners"
+                  class="-m-3 flex items-start p-3 transition duration-150 ease-in-out hover:bg-gray-50"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 flex-shrink-0 text-teci-blue-light"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                  <div class="ml-4">
+                    <p class="text-base font-medium text-gray-900">Partners</p>
+                    <p class="mt-1 text-sm">
+                      International reseller and distributor network
+                    </p>
+                  </div>
+                </a>
+              </button>
+            </div>
+          {/if}
+        </div>
+
+        <a href="https://femtc.com/events/2024" class="text-base font-medium hover:text-gray-900">FEMTC 2024</a>
+      </nav>
+    </div>
+
+    <!-- Search -->
+    <div
+      class="ml-2 flex flex-1 items-center justify-center md:ml-0 md:px-0 lg:justify-end"
+    >
+      <div class="w-full max-w-lg lg:max-w-xs">
+        <form
+          class="m-0"
+          action="https://support.thunderheadeng.com/search"
+          method="get"
+        >
+          <label for="search" class="sr-only">Search</label>
+          <div class="relative">
+            <div
+              class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+            >
+              <svg
+                class="h-5 w-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <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"
+                />
+              </svg>
+            </div>
+            <input
+              id="search"
+              name="teci-search[query]"
+              placeholder="Search"
+              type="search"
+              class="m-0 block w-full rounded-none border border-gray-300 bg-white py-2 pl-10 pr-3 placeholder-gray-500 focus:border-teci-blue-light focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-teci-blue-light sm:text-sm"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Application Buttons -->
+    <div class="px-2">
+      <div class="flex items-center justify-between">
+        <div class="mr-2 md:mr-4">
+          <a
+            href="https://cart.thunderheadeng.com/cgi-bin/UCEditor?merchantId=THENG"
+            title="Shopping Cart"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 flex-shrink-0 md:h-8 md:w-8"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                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"
+              />
+            </svg>
+          </a>
+        </div>
+        <div>
+          <a
+            href="https://cart.thunderheadeng.com/cgi-bin/UCMyAccount"
+            title="My Account"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 flex-shrink-0 md:h-8 md:w-8"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                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"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Menu Button-->
+    <div class="md:hidden">
+      <button
+        type="button"
+        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"}
+      >
+        <span class="sr-only">Open mobile menu</span>
+
+        <svg
+          class="h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on mobile menu state.-->
+  {#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:fade={{ duration: 250, easing: cubicOut }}
+      out:fade={{ duration: 150, easing: cubicIn }}
+    >
+      <div class="px-2 pt-5 pb-6">
+        <!-- Top Bar -->
+        <div class="flex items-center justify-between">
+
+          <!-- Logo -->
+          <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"
+              alt="Thunderhead Engineering"
+            />
+          </a>
+
+          <!-- Close Button -->
+          <button
+            type="button"
+            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>
+
+            <svg
+              class="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+
+        </div>
+
+        <!-- Menu -->
+        <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">
+
+              <!-- Products -->
+              <a href="https://www.thunderheadeng.com/" class="-m-3 flex items-center p-3 hover:bg-gray-50">
+                <div
+                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center bg-teci-blue-light text-white sm:h-12 sm:w-12"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900">
+                  Products
+                </div>
+              </a>
+
+              <!-- Company -->
+              <a
+                href="https://www.thunderheadeng.com/about"
+                class="-m-3 flex items-center p-3 hover:bg-gray-50"
+              >
+                <div
+                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center bg-teci-blue-light text-white sm:h-12 sm:w-12"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      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"
+                    />
+                  </svg>
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900">
+                  Company
+                </div>
+              </a>
+
+              <!-- FEMTC -->
+              <a
+                href="https://www.femtc.com/events/2024"
+                class="-m-3 flex items-center p-3 hover:bg-gray-50"
+              >
+                <div
+                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center bg-teci-blue-light text-white sm:h-12 sm:w-12"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    ><path
+                      stroke-linecap="round"
+                      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"
+                    /></svg
+                  >
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900">
+                  FEMTC 2024
+                </div>
+              </a>
+
+            </div>
+          </nav>
+        </button>
+      </div>
+
+      <!-- Bottom Buttons -->
+      <button type="button" on:click={() => (openMenu = "")}
+        class="w-full py-6 px-2 text-left"
+      >
+        <div class="grid grid-cols-2 gap-4">
+
+
+          <!-- Order Online -->
+          <div class="flow-root">
+            <a
+              href="https://store2.thunderheadeng.com/cart"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 flex-shrink-0 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  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"
+                />
+              </svg>
+              <span class="ml-3">Order Online</span>
+            </a>
+          </div>
+
+          <!-- 30-day Trial -->
+          <div class="flow-root">
+            <a
+              href="https://store2.thunderheadeng.com/trial/"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 flex-shrink-0 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  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>
+          </div>
+
+          <!-- News -->
+          <div class="flow-root">
+            <a
+              href="https://www.thunderheadeng.com/news"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 flex-shrink-0 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  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"
+                />
+              </svg>
+              <span class="ml-3">News</span>
+            </a>
+          </div>
+
+          <!-- Releases -->
+          <div class="flow-root">
+            <a
+              href="https://support.thunderheadeng.com/release-notes"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 flex-shrink-0 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  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"
+                />
+              </svg>
+              <span class="ml-3">Releases</span>
+            </a>
+          </div>
+
+          <!-- Documentation -->
+          <div class="flow-root">
+            <a
+              href="https://support.thunderheadeng.com/docs"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 flex-shrink-0 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  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"
+                />
+              </svg>
+              <span class="ml-3">Documentation</span>
+            </a>
+          </div>
+
+          <!-- Get Help-->
+          <div class="flow-root">
+            <a
+              href="https://help.thunderheadeng.com/support/tickets/new"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+            >
+              <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  height="24" 
+                  viewBox="0 -960 960 960" 
+                  width="24" 
+                  fill="currentColor"
+                  class="h-6 w-6 flex-shrink-0 text-gray-400"
+                >
+                  <path 
+                    d="M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z"
+                  />
+                </svg>
+              <span class="ml-3">Get Help</span>
+            </a>
+          </div>
+        </div>
+      </button>
+    </div>
+  {/if}
+</header>