Decentrala/website
24
1
Fork 12
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

[Fix] menu and theme switch

Browse Source
This commit is contained in:
coja
2026-05-02 01:50:28 +02:00
parent 9fc58a992e
commit e18bf1899e
5 changed files with 105 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
site/scripts/main.js
View File

@@ -1,61 +1,52 @@
const getById = (id) => document.getElementById(id);
const docStyle = document.documentElement.style;
const getByClass = (className) => document.getElementsByClassName(className)[0];
const theme_switcher = getById("theme-switcher");
const sections_button = getById("sections-button");
const themeBtn = getById("theme-switcher");
const hamburger = getByClass("hamburger");
const hamburgerIcon = hamburger.children[0]
const menu = document.getElementsByTagName("nav")[0];
const imgs = document.getElementsByTagName("img");
const sections_menu = document.getElementsByTagName("nav")[0];
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = sections_button.getAttribute("opened") === "true"
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
const menuSrc = sections_button.children[0].src
const body = document.getElementsByClassName("theme")[0];
/* Functions */
function changeToDarkTheme() {
theme_switcher?.setAttribute("title", "turn the light on");
docStyle.setProperty("--border", "var(--dark-border)");
docStyle.setProperty("--text", "var(--dark-text)");
docStyle.setProperty("--bg", "var(--dark-bg)");
const changeToDarkTheme = () => {
body.classList = "theme dark"
window.localStorage.setItem("theme", "dark");
for (let i = 0; i < imgs.length; i += 1) {
imgs[i].src = imgs[i].src.replace("-light", "-dark");
}
themeBtn?.setAttribute("title", "turn the light on");
Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark"));
}
function changeToLightTheme() {
theme_switcher?.setAttribute("title", "turn the light off");
docStyle.setProperty("--border", "var(--light-border)");
docStyle.setProperty("--text", "var(--light-text)");
docStyle.setProperty("--bg", "var(--light-bg)");
const changeToLightTheme = () => {
body.classList = "theme light"
window.localStorage.setItem("theme", "light");
for (let i = 0; i < imgs.length; i += 1) {
imgs[i].src = imgs[i].src.replace("-dark", "-light");
}
themeBtn?.setAttribute("title", "turn the light off");
Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light"));
}
function closeMenu() {
sections_button.setAttribute("opened", "false");
const menuSrc = sections_button.children[0].src
menuSrc.src = menuSrc.replace("opened", "closed");
sections_menu.style.display = "none";
const closeMenu = () => {
hamburger.classList = "hamburger closed"
hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
menu.classList = "menu closed";
}
function openMenu() {
sections_button.setAttribute("opened", "true");
menuSrc = menuSrc.replace("closed", "opened");
sections_menu.style.display = "flex";
sections_menu.style.flexDirection = "column";
const openMenu = () => {
hamburger.classList = "hamburger open"
hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
menu.classList = "menu open";
}
/* Listeners */
sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu());
window.addEventListener("resize", () => isMenuOpen && closeMenu());
main.addEventListener("click", () => isMenuOpen && closeMenu());
window.addEventListener("resize", () => isMenuOpen() && closeMenu());
main.addEventListener("click", () => isMenuOpen() && closeMenu());
hamburger.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
theme_switcher.addEventListener("click", () => {
const title = theme_switcher.getAttribute("title") ?? "off"
themeBtn.addEventListener("click", () => {
const title = themeBtn.getAttribute("title") ?? "off"
if (title.indexOf("off") !== -1) changeToDarkTheme();
else changeToLightTheme();
});