blog/src/components/Navbar.astro

---
import Button from "./control/Button.astro";
import { Icon } from 'astro-icon/components';
import DisplaySetting from "./widget/DisplaySetting.astro";
import I18nKey from "../i18n/i18nKey";
import {i18n} from "../i18n/translation";
import {LinkPreset, NavBarLink} from "../types/config";
import {navBarConfig, siteConfig} from "../config";
import NavMenuPanel from "./widget/NavMenuPanel.astro";
import SearchPanel from "./SearchPanel.vue"
const className = Astro.props.class;

function isI18nKey(key: string): key is I18nKey {
    return Object.values(I18nKey).includes(key);
}

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

function getLinkPresetInfo(p: LinkPreset): NavBarLink {
    switch (p) {
        case LinkPreset.Home:
            return {
                name: i18n(I18nKey.home),
                url: "/page/1"
            };
        case LinkPreset.Archive:
            return {
                name: i18n(I18nKey.archive),
                url: "/archive"
            };
        case LinkPreset.About:
            return {
                name: i18n(I18nKey.about),
                url: "/about"
            };
    }
}

---
<div transition:animate="none" 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="/page/1"><Button height="3.25rem" class="px-5 font-bold rounded-lg active:scale-95" light>
        <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>
    </Button></a>
    <div class="hidden md:block">
        {links.map((l) => {
            return <a aria-label={l.name} href={l.url} target={l.external ? "_blank" : null}>
                <Button light class="font-bold px-5 rounded-lg 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>
                </Button>
            </a>;
        })}
    </div>
    <div class="flex">
        <SearchPanel client:load>
            <Icon slot="search-icon" name="material-symbols:search" size={"1.25rem"} class="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>
            <Button slot="search-switch" name="Search Panel" class="block lg:hidden rounded-lg active:scale-90" id="search-switch" iconName="material-symbols:search" iconSize={"1.25rem"} isIcon light></Button>
        </SearchPanel>
        <Button name="Display Settings" class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={"1.25rem"} isIcon light></Button>
        <Button name="Light/Dark Mode" class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="2.75rem" width="2.75rem">
            <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
            <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
        </Button>
        <Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={"1.25rem"} isIcon light></Button>
    </div>
    <DisplaySetting></DisplaySetting>
    <NavMenuPanel links={links}></NavMenuPanel>

</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");
    settingBtn.addEventListener("click", function () {
        let settingPanel = document.getElementById("display-setting");
        settingPanel.classList.toggle("closed");
    });

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

loadButtonScript();

document.addEventListener('astro:after-swap', () => {
    loadButtonScript();
}, { once: false });
</script>
<script is:raw>
async function loadPagefind() {
    console.log('load')
    const pagefind = await import("/pagefind/pagefind.js");
    await pagefind.options({
        "excerptLength": 20
    })
    pagefind.init();
    window.pagefind = pagefind
}
loadPagefind()
</script>