Search for mobile and mobile menu styles.

Author: nikoshell

pnpm-lock.yaml

@@ -61,5 +61,5 @@ const { title, description, image = "/social-card.png" } = Astro.props;
 
 <script
   is:inline
-  src="https://kit.fontawesome.com/14a4971ab3.js"
+  src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
   crossorigin="anonymous"></script>

src/components/BaseHead.astro

@@ -2,7 +2,8 @@
 import ButtonLink from "../button-link/button-link.astro";
 import Button from "@ui/Button.astro";
 import HeaderButton from "./header-button.astro";
-import Search from "astro-pagefind/components/Search";
+import Search from "../search/Search.astro";
+import Icon from "@ui/Icon.astro";
 
 export interface Props {
   mobile?: boolean;
@@ -13,146 +14,33 @@ const { mobile = false }: Props = Astro.props;
 const IS_LIVE = false;
 ---
 
-<div class="flex items-center justify-end gap-2 w-1/3">
-  <Search
-    id="search"
-    className="pagefind-ui"
-    uiOptions={{
-      showImages: false,
-      translations: {
-        zero_results: "Couldn't find [SEARCH_TERM]",
-      },
-    }}
-  />
+<div class="flex items-center justify-end gap-2 h-[85px]">
+  <Search />
+<div class="ml-auto flex items-center ">
   {
-    !mobile ? (
+    !mobile ? 
       <>
-      <Button url="/tickets" icon="ticket">Register Now!</Button>
-        {IS_LIVE && <Button url="/live">Live</Button>}
+      <Button id="searchButton" icon="search" iconSize="fa-xl" clear ></Button>
+      <Button url="/tickets" icon="ticket" class="max-xl:hidden">Register Now!</Button>
+      {IS_LIVE && <Button url="/live">Live</Button>}
       </>
-    ) : null
+     : null
   }
 
+
   <label for="nav_toggle" class="flex xl:hidden">
-    <HeaderButton variant="menu">
-      {mobile ? "Close Menu" : "Menu"}
-    </HeaderButton>
+      <span class="w-[3em] h-[3em] font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black bg-primary text-white hover:bg-primary-hover border-transparent">
+      {mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
+      </span>
   </label>
 </div>
 <script>
-  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;
+    const searchButton = document.getElementById("searchButton");
+    const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement;
 
-      results.forEach((result, index) => {
-        if (index === selectedIndex) {
-          result.classList.add("selected");
-          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
-        } else {
-          result.classList.remove("selected");
-        }
+    if (searchButton && searchWrapper) {
+      searchButton.addEventListener("click", function () {
+        searchWrapper.style.display = searchWrapper.style.display === "block" ? "none" : "block";
       });
     }
-
-    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();
-        }
-      }
-    });
-
-    // Reset selection when the search query changes
-    searchInput?.addEventListener("input", function () {
-      selectedIndex = -1;
-    });
-  });
 </script>
-<style is:global>
-  .pagefind-ui__result.selected {
-    background-color: #f5f5f5;
-    background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  .pagefind-ui__drawer {
-  }
-  .pagefind-ui__message {
-    margin: 1em;
-  }
-  .pagefind-ui__result mark {
-    background: #f9eb5d;
-    background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
-    margin: 4px;
-    padding-right: 6px;
-    padding-left: 6px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    color: #000000;
-    font-family: monospace;
-    border-radius: 4px;
-  }
-  .pagefind-ui {
-    --pagefind-ui-scale: 1;
-    --pagefind-ui-primary: #141f36;
-    --pagefind-ui-text: black;
-    --pagefind-ui-border: #d8d8d8;
-    --pagefind-ui-border-width: 2px;
-    --pagefind-ui-border-radius: 0;
-    width:50%;
-    min-width: 10vw;
-  }
-  .pagefind-ui.yellow {
-    --pagefind-ui-background: #efc302;
-  }
-  .pagefind-ui.red {
-    --pagefind-ui-background: #ffb9bb;
-    width: 50%;
-  }
-  .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-    position: absolute;
-    left: auto;
-    right: 0;
-    margin-top: 0px;
-    width: 50vw;
-    z-index: 9999;
-    overflow-y: auto;
-    box-shadow:
-      0 10px 10px -5px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.1);
-    border-bottom-right-radius: var(--pagefind-ui-border-radius);
-    border-bottom-left-radius: var(--pagefind-ui-border-radius);
-    background-color: var(--pagefind-ui-background);
-  }
-  .pagefind-ui__result {
-    padding: 0 2em 1em !important;
-  }
-  .pagefind-ui .pagefind-ui__result-link {
-    color: var(--pagefind-ui-primary);
-  }
-  .pagefind-ui .pagefind-ui__result-excerpt {
-    color: var(--pagefind-ui-text);
-  }
-  @media (max-width: 1280px) {
-    .pagefind-ui {
-      display: none;
-    }
-  }
-</style>

src/components/header/header-actions.astro

@@ -27,7 +27,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
   <div
     class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 p-6"
   >
-    <div class="flex items-center">
+    <div class="flex items-center justify-between">
       <HeaderLogo />
       <HeaderActions mobile />
     </div>