56 lines
2.4 KiB
JavaScript
56 lines
2.4 KiB
JavaScript
// Steuert das Ein-/Ausklappen der Sidebar — sowohl auf breiten Bildschirmen
|
|
// (Desktop: Sidebar verschwindet, Inhalt füllt den Platz) als auch auf schmalen
|
|
// Bildschirmen (Mobile: Sidebar liegt als Overlay über dem Inhalt).
|
|
//
|
|
// Bewusst zwei getrennte CSS-Klassen statt einer gemeinsamen:
|
|
// "sidebar-collapsed" → Desktop-Zustand, wird in localStorage gemerkt
|
|
// "sidebar-mobile-open" → Mobile-Zustand, startet nach jedem Seitenaufruf zu
|
|
// (das Wiki lädt bei jeder Navigation die Seite komplett
|
|
// neu — ein offenes Mobile-Menü würde sonst irritierend
|
|
// "hängen bleiben")
|
|
// So beeinflussen sich Desktop- und Mobile-Verhalten nicht gegenseitig, siehe
|
|
// style.css für die dazugehörigen Regeln.
|
|
(function () {
|
|
var MOBILE_BREAKPOINT = 768; // muss zum @media-Breakpoint in style.css passen
|
|
var STORAGE_KEY = "wiki-sidebar-collapsed";
|
|
|
|
function isMobile() {
|
|
return window.innerWidth <= MOBILE_BREAKPOINT;
|
|
}
|
|
|
|
// Auf Desktop den zuletzt gewählten Zustand aus einem vorherigen Besuch übernehmen.
|
|
if (!isMobile() && localStorage.getItem(STORAGE_KEY) === "true") {
|
|
document.body.classList.add("sidebar-collapsed");
|
|
}
|
|
|
|
var toggleButton = document.getElementById("sidebar-toggle");
|
|
var backdrop = document.getElementById("sidebar-backdrop");
|
|
|
|
function toggleSidebar() {
|
|
if (isMobile()) {
|
|
document.body.classList.toggle("sidebar-mobile-open");
|
|
return;
|
|
}
|
|
|
|
var collapsed = document.body.classList.toggle("sidebar-collapsed");
|
|
localStorage.setItem(STORAGE_KEY, collapsed ? "true" : "false");
|
|
}
|
|
|
|
toggleButton.addEventListener("click", toggleSidebar);
|
|
|
|
// Auf das Overlay neben der Sidebar klicken schließt sie wieder (nur Mobile).
|
|
backdrop.addEventListener("click", function () {
|
|
document.body.classList.remove("sidebar-mobile-open");
|
|
});
|
|
|
|
// Wechselt der Nutzer die Fensterbreite über den Breakpoint hinweg, sollen
|
|
// keine widersprüchlichen Zustände übrig bleiben (z.B. Mobile-Menü offen,
|
|
// obwohl das Fenster inzwischen breit genug für die normale Desktop-Ansicht ist).
|
|
window.addEventListener("resize", function () {
|
|
if (isMobile()) {
|
|
document.body.classList.remove("sidebar-collapsed");
|
|
} else {
|
|
document.body.classList.remove("sidebar-mobile-open");
|
|
}
|
|
});
|
|
})();
|