Search for mobile and mobile menu styles.

Author: nikoshell

src/components/header/header-actions.astro

@@ -14,13 +14,13 @@ const { mobile = false }: Props = Astro.props;
 const IS_LIVE = false;
 ---
 
-<div class="flex items-center justify-end gap-2 h-[85px]">
+<div class="flex items-start justify-end gap-2 h-[85px]">
   <Search />
-<div class="ml-auto flex items-center ">
+<div class="ml-auto flex items-start">
   {
-    !mobile ? 
+    !mobile ?
       <>
-      <Button id="searchButton" icon="search" iconSize="fa-xl" clear ></Button>
+      <Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
       <Button url="/tickets" icon="ticket" class="max-xl:hidden">Register Now!</Button>
       {IS_LIVE && <Button url="/live">Live</Button>}
       </>

src/components/search/Search.astro

@@ -1,6 +1,7 @@
 ---
 import Search2 from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+import HeaderLogo from "@components/header/header-logo.astro";
 ---
 
 <div class="search-wrapper hidden" style="display: none;">
@@ -15,7 +16,11 @@ import Button from "@ui/Button.astro";
       },
     }}
   />
-  <Button secondary icon="close" iconSize="fa-xl" class="search-wrapper-close w-[3em] h-[3em] " />
+
+    <div class="logo-wrapper">
+      <HeaderLogo />
+    </div>
+    <Button secondary icon="close" iconSize="fa-xl" class="search-wrapper-close w-[3em] h-[3em] " />
     </div>
 
 <style is:global>
@@ -30,7 +35,7 @@ import Button from "@ui/Button.astro";
     right: 0;
     z-index: 500;
     box-sizing: border-box;
-    padding: 2rem;
+    /*padding: 2rem;*/
     display: none;
     transition: opacity ease-out 0.2s;
     /*pointer-events: none;*/
@@ -41,22 +46,31 @@ import Button from "@ui/Button.astro";
   #search {
     padding:10px;
     position: relative;
-    top: calc(3rem + 4vw);
+    top: calc(5rem + 4vw);
     max-height: 80vh;
     width: 100%;
     max-width: calc(64rem + 8vw);
     margin: auto;
-    background: #FFF;
-    border-radius: 4px;
-    box-shadow: 0 8px 24px -2px rgba(0,0,0,0.4);
+    /*background: #FFF;*/
+    /*border-radius: 4px;*/
+    /*box-shadow: 0 8px 24px -2px rgba(0,0,0,0.4);*/
     overflow: auto;
 }
 
 .search-wrapper-close {
   position: absolute;
   right: 0;
   top: 0;
-  margin: 40px 24px;
+  margin: 24px;
+  border: 0;
+  transition: opacity ease-out 0.2s;
+  z-index: 10;
+}
+.logo-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 24px;
   border: 0;
   transition: opacity ease-out 0.2s;
   z-index: 10;
@@ -65,65 +79,88 @@ import Button from "@ui/Button.astro";
 </style>
 
 <script>
-import type { HTMLElementType } from "react";
-
-  document.addEventListener("DOMContentLoaded", function () {
-    const searchContainer = document.querySelector(".pagefind-ui");
-    const searchInput = searchContainer?.querySelector("input");
-    let selectedIndex = -1;
-
-    function updateSelection() {
-      const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
-      if (!results) return;
-
-      results.forEach((result, index) => {
-        if (index === selectedIndex) {
-          result.classList.add("selected");
-          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
-        } else {
-          result.classList.remove("selected");
-        }
-      });
-    }
+document.addEventListener("DOMContentLoaded", function () {
+  const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement;
+  const searchContainer = document.querySelector(".pagefind-ui");
+  const searchInput = searchContainer?.querySelector("input");
+  const closeButton = document.querySelector(".search-wrapper-close");
+  let selectedIndex = -1;
 
-    document.addEventListener("keydown", function (event) {
-      if (!searchContainer || !searchInput) return;
-
-      const results = searchContainer.querySelectorAll(".pagefind-ui__result");
-      if (document.activeElement === searchInput) {
-        if (event.key === "ArrowDown") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex + 1) % results.length;
-          updateSelection();
-        } else if (event.key === "ArrowUp") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex - 1 + results.length) % results.length;
-          updateSelection();
-        } else if (event.key === "Enter" && selectedIndex >= 0) {
-          event.preventDefault();
-          results[selectedIndex].querySelector("a")?.click();
-        }
-      }
-    });
+  function openSearch() {
+    if (searchWrapper) {
+      searchWrapper.style.display = "block";
+      searchInput?.focus();
+    }
+  }
 
-    // Reset selection when the search query changes
-    searchInput?.addEventListener("input", function () {
+  function closeSearch() {
+    if (searchWrapper) {
+      searchWrapper.style.display = "none";
       selectedIndex = -1;
+    }
+  }
+
+  function updateSelection() {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (!results) return;
+
+    results.forEach((result, index) => {
+      if (index === selectedIndex) {
+        result.classList.add("selected");
+        result.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      } else {
+        result.classList.remove("selected");
+      }
     });
+  }
 
+  document.addEventListener("keydown", function (event) {
+    if (!searchContainer || !searchInput) return;
 
-    // Close button functionality
-    const closeButton = document.querySelector(".search-wrapper-close");
-    const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement;
+    const results = searchContainer.querySelectorAll(".pagefind-ui__result");
 
-    // Close button functionality - toggle display property
-    closeButton?.addEventListener("click", function () {
-      if (searchWrapper) {
-        searchWrapper.style.display = searchWrapper.style.display === "none" ? "block" : "none";
+    if (event.ctrlKey && event.key === "k") {
+      event.preventDefault();
+      openSearch();
+    } else if (event.key === "Escape") {
+      closeSearch();
+    } else if (document.activeElement === searchInput) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % results.length;
+        updateSelection();
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex - 1 + results.length) % results.length;
+        updateSelection();
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        if (results.length > 0) {
+          const indexToOpen = selectedIndex === -1 ? 0 : selectedIndex;
+          results[indexToOpen]?.querySelector("a")?.click();
+        }
       }
-    });
+    }
+  });
 
+  // Highlight first result after results are injected
+  const resultsObserver = new MutationObserver(() => {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (results && results.length > 0) {
+      selectedIndex = 0;
+      updateSelection();
+    }
   });
+
+  if (searchContainer) {
+    resultsObserver.observe(searchContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  closeButton?.addEventListener("click", closeSearch);
+});
 </script>
 <style is:global>
   .modal__overlay {

src/components/ui/Button.astro

@@ -13,7 +13,8 @@ const {
   icon,
   iconSvg = false,
   iconRight = true,
-  iconSize = ""
+  iconSize = "",
+  title="",
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
@@ -26,13 +27,17 @@ const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
 const idName = id;
+const slotContent = await Astro.slots.render('default')
+
 
 ---
 
 {url ? (
   <a
     id={idName}
     href={disabled ? undefined : url}
+    title={title}
+    aria-label={title ? title : slotContent }
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
@@ -48,6 +53,8 @@ const idName = id;
 ) : (
   <button
     id={idName}
+    title={title}
+    aria-label={title ? title : slotContent }
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}