Topbar.astro

---
import {Image} from 'astro:assets';
import logo from "../../assets/regen.png";
import Search from "astro-pagefind/components/Search";
---
<header class="flex flex-row py-2 px-3 h-16 bg-brand-300 justify-between items-center sticky w-full"
        data-pagefind-ignore="all">
    <div class="flex flex-row gap-4 items-center">
        <Image src={logo} alt="Regen Network" width="20" height="20"/>
        <a href="/"><h1 class="text-grey-100 font-semibold text-xl">Regen Network Data Standards</h1></a>
    </div>
    <div class="flex flex-row gap-4 items-center">
        <Search id="search" className="pagefind-ui w-80" uiOptions={{showImages: false}}/>
        <a href="https://github.com/regen-network/regen-data-standards">
            <span class="icon-[radix-icons--github-logo] text-grey-0 h-8 w-8"/>
        </a>
        <span class="icon-[radix-icons--hamburger-menu] text-grey-0 lg:hidden h-8 w-8"
              id="btn-menu"/>
    </div>
</header>
<style is:global>
    .pagefind-ui {
        //--pagefind-ui-scale: 0.75;
        //--pagefind-ui-primary: navy;
        //--pagefind-ui-text: black;
        //--pagefind-ui-border: slategrey;
        //--pagefind-ui-border-width: 1px;
        //--pagefind-ui-border-radius: 0.25rem;
        //--pagefind-ui-font: sans-serif;
    }

    .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 0px;
        z-index: 9999;
        padding: 0 2em 1em;
        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 .pagefind-ui__result-link {
        color: var(--pagefind-ui-primary);
    }

    .pagefind-ui .pagefind-ui__result-excerpt {
        color: var(--pagefind-ui-text);
    }
</style>