fuwari/src/components/Navbar.astro

---
import Button from "./control/Button.astro";
import { Icon } from 'astro-icon/components';
import DisplaySetting from "./widget/DisplaySetting.astro";
import {getConfig} from "../utils/config-utils";
import I18nKey from "../i18n/i18nKey";
import {i18n} from "../i18n/translation";
const className = Astro.props.class;

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

function getLinkName(name: string) {
    if (isI18nKey(name)) {
        return i18n(name);
    }
    return name;
}

---
<div transition:animate="none" class:list={[
    className,
    "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
    <a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg" light>
        <div class="flex flex-row text-[var(--primary)] items-center text-md">
            <Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
            {getConfig().title}
        </div>
    </Button></a>
    <div>
        {Object.keys(getConfig().menu).map((key) => {
            return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg">{getLinkName(key)}</Button></a>
        })}
    </div>
    <div class="flex">
        <div>
            <Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
        </div>
        <div>
            <Button class="rounded-lg flex items-center justify-center" id="scheme-switch" light height="44px" width="44px">
                <Icon name="material-symbols:wb-sunny-outline-rounded" size={20} class="absolute opacity-[var(--display-light-icon)]"></Icon>
                <Icon name="material-symbols:dark-mode-outline-rounded" size={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
            </Button>
        </div>
    </div>
    <DisplaySetting></DisplaySetting>

</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 loadThemeSwitchScript() {
    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");
    });
}

loadThemeSwitchScript();

document.addEventListener('astro:after-swap', () => {
    loadThemeSwitchScript();
}, { once: false });



</script>