[Fix] menu and theme switch

2026-05-02 01:50:28 +02:00
parent 9fc58a992e
commit e18bf1899e
5 changed files with 105 additions and 93 deletions
--- a/site/deconference.html
+++ b/site/deconference.html
@@ -1,11 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="sr">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-  <!--
-  <pre>
+    <!-- <pre>

                                *@@* 
                               *@@@@*
@@ -27,26 +26,28 @@
  | |_| | |__| |___| |___| |\  | | | |  _ <  / ___ \| |___ / ___ \ 
  |____/|_____\____|_____|_| \_| |_| |_| \_\/_/   \_\_____/_/   \_\

-  </pre>
-  -->
+  </pre> -->

-  <link rel="stylesheet" href="/styles/reset.css">
-  <link rel="stylesheet" href="/styles/style.css">
-  <link rel="stylesheet" href="/styles/deconference.css">
-  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
-  <script src="/scripts/main.js" defer></script>
-  <title>Dekonferencija Decentrala</title>
-  <link rel="alternate" hreflang="en" href="/en/deconference" />
-</head>
-<body>
-  <header>
-    <a id="logo" href="/"><img src="/img/logo-light.svg" alt="Logo"> Decentrala</a>
-    <button id="theme-switcher"></button>
-    <a class="lang" hreflang="en" href="/en/deconference">EN</a>
-  </header>
-  <main>
-    <div class="page-wrap">
-    <div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1>
+    <link rel="stylesheet" href="/styles/reset.css" />
+    <link rel="stylesheet" href="/styles/style.css" />
+    <link rel="stylesheet" href="/styles/deconference.css">
+    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
+    <script src="/scripts/main.js" defer></script>
+    <title>Dekonferencija Decentrala</title>
+    <link rel="alternate" hreflang="en" href="/en/deconference" />
+  </head>
+  <body class="theme light">
+    <header>
+      <a id="logo" href="/">
+        <img src="/img/logo-light.svg" alt="Logo" />
+        Decentrala
+      </a>
+      <button id="theme-switcher"></button>
+      <a class="lang" hreflang="en" href="/en/deconference">EN</a>
+    </header>
+    <main>
+      <div class="page-wrap">
+        <div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1>

 <h2 id="program"><a href="#program">Program</a></h2>
 <p>11:00  Otvaranje<p>
@@ -82,24 +83,34 @@

 <p>Decentrala prihvata donacije isključivo od fizičkih lica.</p>

-    </div>
-  </main>
-  <footer>
-    <button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
-    <nav>
-      <a href="/events">Događaji</a>
-      <a href="/services">Servisi</a>
-      <a href="/statute">Statut</a>
-      <a href="/about">O nama</>
-      <a class="account" href="/account">Nalog</a>
-      <a href="/support">Podrška</a>
-    </nav>
-    <span class="links">
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg" alt="CreativeCommons"></a>
-      <a href="/webring"><img src="/img/w-light.svg" alt="Webring"></a>
-      <a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg" alt="SourceCode"></a>
-      <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
-    </span>
-  </footer>
-</body>
+      </div>
+    </main>
+    <footer>
+      <button class="hamburger closed">
+        <img src="/img/strelica-closed-light.svg" alt="Menu" />
+      </button>
+      <nav class="menu">
+        <a href="/events">Događaji</a>
+        <a href="/services">Servisi</a>
+        <a href="/statute">Statut</a>
+        <a href="/about">O nama</a>
+        <a class="account" href="/account">Nalog</a>
+        <a href="/support">Podrška</a>
+      </nav>
+      <span class="links">
+        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+          <img src="/img/cc-light.svg" alt="CreativeCommons" />
+        </a>
+        <a href="/webring">
+          <img src="/img/w-light.svg" alt="Webring" />
+        </a>
+        <a href="https://gitea.dmz.rs/Decentrala/website">
+          <img src="/img/git-light.svg" alt="SourceCode" />
+        </a>
+        <a href="https://balkan.fedive.rs/@decentrala">
+          <img src="/img/mastodon-light.svg" alt="Mastodon" />
+        </a>
+      </span>
+    </footer>
+  </body>
 </html>
--- a/site/scripts/main.js
+++ b/site/scripts/main.js
@@ -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();
 });
--- a/site/styles/style.css
+++ b/site/styles/style.css
@@ -11,6 +11,12 @@
  --bg: var(--light-bg);
 }

+body.dark {
+  --border: var(--dark-border);
+  --text: var(--dark-text);
+  --bg: var(--dark-bg);
+}
+
@font-face {
  font-family: "Iosevka";
  src: url("/font/iosevka-regular.woff") format("woff");
@@ -153,7 +159,7 @@ a:visited {
  }
 }

-#sections-button {
+.hamburger {
  display: none;
 }

@@ -186,7 +192,7 @@ button {
 }

@media screen and (max-width: 1160px) {
-  nav {
+  nav.menu {
    flex-direction: column;
    border: 2px solid var(--border);
    border-bottom: 0;
@@ -198,9 +204,13 @@ button {
    align-items: center;
    padding: 2rem 3rem;
    display: none;
+    &.open {
+      display: flex;
+      flex-direction: column;
+    }
  }

-  #sections-button {
+  .hamburger {
    display: block !important;
  }
 }
--- a/template/page-en.html
+++ b/template/page-en.html
@@ -36,7 +36,7 @@
    <title><!--TITLE--> Decentrala</title>
    <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
  </head>
-  <body className="light">
+  <body class="theme light">
    <header>
      <a id="logo" href="/en/index">
        <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
@@ -50,10 +50,10 @@
      </div>
    </main>
    <footer>
-      <button id="sections-button" opened="false">
-        <img src="/img/strelica-closed-light.svg" alt="OpenMenu" />
+      <button class="hamburger closed">
+        <img src="/img/strelica-closed-light.svg" alt="Menu" />
      </button>
-      <nav>
+      <nav class="menu">
        <a href="/en/events">Events</a>
        <a href="/en/services">Services</a>
        <a href="/en/statute">Statute</a>
--- a/template/page-sr.html
+++ b/template/page-sr.html
@@ -36,7 +36,7 @@
    <title><!--TITLE--> Decentrala</title>
    <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
  </head>
-  <body className="light">
+  <body class="theme light">
    <header>
      <a id="logo" href="/">
        <img src="/img/logo-light.svg" alt="Logo" />
@@ -51,10 +51,10 @@
      </div>
    </main>
    <footer>
-      <button id="sections-button" opened="false">
-        <img src="/img/strelica-closed-light.svg" alt="OpenMenu" />
+      <button class="hamburger closed">
+        <img src="/img/strelica-closed-light.svg" alt="Menu" />
      </button>
-      <nav>
+      <nav class="menu">
        <a href="/events">Događaji</a>
        <a href="/services">Servisi</a>
        <a href="/statute">Statut</a>