aramjonghu-site/frontend/src/components/Header.jsx

import Aku from "../assets/images/aku.png";

export default function Header({ theme }) {
    const { theme: currentTheme, toggleTheme } = theme;

    const navItems = [
        { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
        { label: "Navidrome", url: "https://music.aramjonghu.nl" },
        { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
        { label: "Stream", url: "/stream" },
        { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
        { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
    ];

    const goHome = () => {
        window.location.href = "/";
    };

    return (
        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
            <img
                className="size-16 cursor-pointer"
                src={Aku}
                alt="Home"
                onClick={goHome}
            />

            <nav className="flex flex-wrap gap-3 items-center">
                {navItems.map((item) => (
                    <a
                        key={item.label}
                        href={item.url}
                        className="ui-btn ui-btn:hover"
                    >
                        {item.label}
                    </a>
                ))}
            </nav>

            <div>
                <button className="ui-btn ui-btn:hover" onClick={toggleTheme}>
                    {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
                </button>
            </div>
        </header>
    );
}