usbcheck.it/public/assets/js/header.js

// public/assets/js/header.js
document.addEventListener("DOMContentLoaded", function () {
    const cfg        = window.usbConfig || {};
    const i18nCfg    = cfg.i18n || {};
    const availLangs = i18nCfg.available || {};
    const availCodes = Object.keys(availLangs);

    function normalizeLang(code) {
        if (!code) return "";
        return String(code).slice(0, 2).toLowerCase();
    }

    function detectBrowserLang() {
        const nav = window.navigator || {};
        const candidates = [];

        if (Array.isArray(nav.languages)) {
            candidates.push(...nav.languages);
        }
        if (typeof nav.language === "string") {
            candidates.push(nav.language);
        }
        if (typeof nav.userLanguage === "string") {
            candidates.push(nav.userLanguage);
        }

        for (const raw of candidates) {
            const code = normalizeLang(raw);
            if (availCodes.includes(code)) {
                return code;
            }
        }
        return null;
    }

    function resolveCurrentLang() {
        const url     = new URL(window.location.href);
        const urlLang = normalizeLang(url.searchParams.get("lang"));

        // 1) ?lang
        if (urlLang && availCodes.includes(urlLang)) {
            return urlLang;
        }

        // 2) Browsersprache
        const browserLang = detectBrowserLang();
        if (browserLang) {
            return browserLang;
        }

        // 3) EN
        if (availCodes.includes("en")) {
            return "en";
        }

        if (availCodes.length > 0) {
            return availCodes[0];
        }

        return "en";
    }

    // LOGIN-BUTTON
    const loginBtn = document.getElementById("loginButton");

    if (loginBtn) {
        loginBtn.addEventListener("click", function (event) {
            event.preventDefault();

            const currentPath  = window.location.pathname || "/";
            const currentQuery = window.location.search || "";
            const redirect     = currentPath + currentQuery;

            const lang = resolveCurrentLang();

            if (currentPath === "/login" || currentPath === "/login/") {
                const authEl = document.getElementById("auth");
                if (authEl) {
                    authEl.scrollIntoView({ behavior: "smooth", block: "start" });
                }
                return;
            }

            const url = "/login/?lang=" + encodeURIComponent(lang) +
                "&redirect=" + encodeURIComponent(redirect) +
                "#auth";

            window.location.href = url;
        });
    }

    // AVATAR-MENÜ & LOGOUT wie gehabt (deine bestehende Logik)
    const avatarBtn = document.getElementById("userAvatar");
    const userMenu  = document.getElementById("userMenu");

    if (avatarBtn && userMenu) {
        avatarBtn.addEventListener("click", function (event) {
            event.stopPropagation();
            userMenu.classList.toggle("hidden");

            const expanded = avatarBtn.getAttribute("aria-expanded") === "true";
            avatarBtn.setAttribute("aria-expanded", expanded ? "false" : "true");
        });

        document.addEventListener("click", function (event) {
            if (userMenu.classList.contains("hidden")) {
                return;
            }

            const clickedInsideMenu   = userMenu.contains(event.target);
            const clickedAvatarButton = avatarBtn.contains(event.target);

            if (!clickedInsideMenu && !clickedAvatarButton) {
                userMenu.classList.add("hidden");
                avatarBtn.setAttribute("aria-expanded", "false");
            }
        });
    }

    const logoutButtons = document.querySelectorAll('[data-logout-link="true"]');
    const backdrop      = document.getElementById("logoutModalBackdrop");
    const btnConfirm    = document.getElementById("logoutConfirm");
    const btnCancel     = document.getElementById("logoutCancel");

    let logoutTarget = null;

    function showLogoutModal(targetHref) {
        logoutTarget = targetHref || null;
        if (!backdrop) return;

        backdrop.classList.remove("hidden");
        document.body.classList.add("overflow-hidden");
    }

    function hideLogoutModal() {
        if (!backdrop) return;
        backdrop.classList.add("hidden");
        document.body.classList.remove("overflow-hidden");
        logoutTarget = null;
    }

    if (logoutButtons.length && backdrop && btnConfirm && btnCancel) {
        logoutButtons.forEach(function (btn) {
            btn.addEventListener("click", function (event) {
                event.preventDefault();
                event.stopPropagation();

                const href = btn.getAttribute("data-logout-href")
                    || btn.getAttribute("href")
                    || "/auth/logout";

                showLogoutModal(href);

                if (userMenu && !userMenu.classList.contains("hidden")) {
                    userMenu.classList.add("hidden");
                    if (avatarBtn) {
                        avatarBtn.setAttribute("aria-expanded", "false");
                    }
                }
            });
        });

        btnConfirm.addEventListener("click", function () {
            if (logoutTarget) {
                window.location.href = logoutTarget;
            } else {
                window.location.href = "/auth/logout";
            }
        });

        btnCancel.addEventListener("click", function () {
            hideLogoutModal();
        });

        backdrop.addEventListener("click", function (event) {
            const card = backdrop.querySelector(".max-w-sm");
            if (card && !card.contains(event.target)) {
                hideLogoutModal();
            }
        });

        document.addEventListener("keydown", function (event) {
            if (event.key === "Escape" && !backdrop.classList.contains("hidden")) {
                hideLogoutModal();
            }
        });
    }
});