fuwari/src/components/Navbar.astro

---
import { Icon } from 'astro-icon/components';
import DisplaySettings from "./widget/DisplaySettings.svelte";
import {LinkPreset, NavBarLink} from "../types/config";
import {navBarConfig, siteConfig} from "../config";
import NavMenuPanel from "./widget/NavMenuPanel.astro";
import Search from "./Search.svelte";
import {LinkPresets} from "../constants/link-presets";
import LightDarkSwitch from "./LightDarkSwitch.svelte";
import {url} from "../utils/url-utils";
const className = Astro.props.class;

let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset): NavBarLink => {
    if (typeof item === "number") {
        return LinkPresets[item]
    }
    return item;
});

---
<div class:list={[
    className,
    "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
    <a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
        <div class="flex flex-row text-[var(--primary)] items-center text-md">
            <Icon name="material-symbols:home-outline-rounded" size={"1.75rem"} class="mb-1 mr-2" />
            {siteConfig.title}
        </div>
    </a>
    <div class="hidden md:flex">
        {links.map((l) => {
            return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
                      class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
            >
                <div class="flex items-center">
                    {l.name}
                    {l.external && <Icon size="14" name="fa6-solid:arrow-up-right-from-square" class="transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
                </div>
            </a>;
        })}
    </div>
    <div class="flex">
        <!--<SearchPanel client:load>-->
        <Search client:load>
            <Icon slot="search-icon" name="material-symbols:search" size={"1.25rem"} class="absolute pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
            <!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" size={"1.25rem"} class="transition my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
            <Icon slot="arrow-icon" name="fa6-solid:chevron-right" size={"0.75rem"} class="transition translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
            <Icon slot="search-switch" name="material-symbols:search" size={"1.25rem"}></Icon>
        </Search>
        {!siteConfig.themeColor.fixed && (
            <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
                <Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
            </button>
        )}
        <LightDarkSwitch client:load></LightDarkSwitch>
        <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden" id="nav-menu-switch">
            <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
        </button>
    </div>
    <NavMenuPanel links={links}></NavMenuPanel>
    <DisplaySettings client:only="svelte">
        <Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" size={"0.875rem"} class=""></Icon>
    </DisplaySettings>
</div>

<style lang="stylus">
</style>

<script>

function switchTheme() {
    if (localStorage.theme === 'dark') {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
    } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
    }
}

function loadButtonScript() {
    let switchBtn = document.getElementById("scheme-switch");
    switchBtn.addEventListener("click", function () {
        switchTheme()
    });

    let settingBtn = document.getElementById("display-settings-switch");
    if (settingBtn) {
        settingBtn.addEventListener("click", function () {
            let settingPanel = document.getElementById("display-setting");
            settingPanel.classList.toggle("float-panel-closed");
        });
    }

    let menuBtn = document.getElementById("nav-menu-switch");
    menuBtn.addEventListener("click", function () {
        let menuPanel = document.getElementById("nav-menu-panel");
        menuPanel.classList.toggle("float-panel-closed");
    });
}

loadButtonScript();

document.addEventListener('astro:after-swap', () => {
    loadButtonScript();
}, { once: false });
</script>

{import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url('/pagefind/pagefind.js')}}>
async function loadPagefind() {
    const pagefind = await import(scriptUrl)
    await pagefind.options({
        'excerptLength': 20
    })
    pagefind.init()
    window.pagefind = pagefind
    pagefind.search('')     // speed up the first search
}
loadPagefind()
</script>}