Source: pages/navigation/navigationPage.js

/**
 * This is the navigation that is always shown at the top of all Pages
 * @extends Page
 */
class NavigationPage extends Page{
    constructor() {
        let content = {
            navbar: new SideBar(),
        }
        super(content, "navbar", "NavigationPage");

        this.languageSelect = document.getElementById("Dropdown");
        this.darkModeSwitch = document.getElementById("darkmode-switch");
        this.gameModeSwitch = document.getElementById("game-switch");
        this.activeLangFlag = document.getElementById("activeLanguageFlag");
    }

    setup() {
        //no super.beforeSetup() because ths page shall not be hidden after setup
        this.content.navbar.setup();
        this.#setBodyPaddingForFixedTopNavbar();
        this.#setupDarkModeSwitch();
        this.#setupGameModeSwitch();

        super.afterSetup();
    }

    addEventListeners() {
        const toggler = document.getElementById("nav-toggler");
        toggler.addEventListener("click", () => {
            let newOpacity
            if (this.pageDiv.querySelector("button").classList.contains("collapsed")) {
                newOpacity = 1;
            }
            else{
                newOpacity = 0.3;
            }
            pageManager.updatePageOpacity(newOpacity, null, true);
        })
    }

    close() {
        const navbarToggler = document.getElementById("nav-toggler");
        navbarToggler.classList.add("collapsed");
        const navDropdown = document.getElementById("navbarSupportedContent");
        navDropdown.classList.remove("show");
        pageManager.updatePageOpacity(1, null, true)
    }

    disableSettings() {
        this.languageSelect.disabled = true;
        this.darkModeSwitch.disabled = true;
        this.gameModeSwitch.disabled = true;
        this.activeLangFlag.style.filter = "brightness(0.5)";
    }

    enableSettings() {
        this.languageSelect.disabled = false;
        this.darkModeSwitch.disabled = false;
        this.gameModeSwitch.disabled = false;
        this.activeLangFlag.style.filter = "brightness(1)";
    }

    opacity(newOpacity = 1) {
        //keep opacity as is
    }

    setupEasterEggs() {
        setupSmoothStarsEasterEgg();
    }

    #setBodyPaddingForFixedTopNavbar() {
        const navBar = document.getElementById("navbar");
        let height = navBar.offsetHeight;
        const body = document.getElementsByTagName("body")[0];
        body.style.paddingTop = height + "px";
    }

    #setupDarkModeSwitch() {
        const darkModeSwitch = document.getElementById("darkmode-switch");
        //darkModeSwitch.checked = true; not necessary, because default mode is set in beginning
        darkModeSwitch.addEventListener("change", () => {
            if (darkModeSwitch.checked) {
                colors.setDarkModeColors();
                pushDarkModeEventMatomo(configDarkModeValues.Dark)
            } else {
                colors.setLightModeColors();
                pushDarkModeEventMatomo(configDarkModeValues.Light)
            }
            pageManager.updateColor();
            pageManager.pages.newNavigation.close();
        });
    }

    #setupGameModeSwitch() {
        const gameModeSwitch = document.getElementById("game-switch");
        gameModeSwitch.addEventListener("change", () => {
            state.gamification = !!gameModeSwitch.checked;
            pageManager.pages.newNavigation.close();
            if (state.gamification) {
                //addLivesField();
                setupShakeAnimation();
            } else {
                //removeLivesAndShowLogo();
            }
        });
    }
}