SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Add experimental Search Feature

Browse Source
This commit is contained in:
Chaoscaot
2024-08-02 01:26:05 +02:00
parent f0426f5225
commit 4778429452
9 changed files with 251 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Navbar.svelte
View File

@ -18,14 +18,14 @@
-->
<script lang="ts">
import {Image} from "astro:assets";
import "../styles/button.css";
import {CaretDownOutline} from "flowbite-svelte-icons";
import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
import {t} from "astro-i18n";
import {l} from "../util/util";
import {onMount} from "svelte";
let navbar: HTMLDivElement;
let searchOpen = false;
onMount(() => {
handleScroll();
@ -42,14 +42,14 @@
<svelte:window on:scroll={handleScroll}/>
<nav class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top" bind:this={navbar}>
<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top" bind:this={navbar}>
<div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
<a class="flex items-center" href={l("/")}>
<slot name="logo"></slot>
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
<span class="text-2xl uppercase font-bold inline-block dark:text-white">
{t("navbar.title")}
<span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
</h1>
</span>
</a>
<div class="flex justify-center flex-wrap">
<div class="btn-dropdown my-1">
@ -109,10 +109,19 @@
<a class="btn my-1" href={l("/login")}>
<span class="btn__text">{t("navbar.links.account")}</span>
</a>
<button class="btn my-1" on:click={() => searchOpen = true}>
<SearchOutline ariaLabel="Site Search" class="inline-block h-6"/>
</button>
</div>
</div>
</nav>
{#if searchOpen}
{#await import("./SearchComponent.svelte") then c}
<svelte:component this={c.default} bind:open={searchOpen} />
{/await}
{/if}
<style lang="scss">
.match {
width: min(100vw, 70em);