122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
/* ==========================================
|
|
NAVIGATION & MOBILE MENU
|
|
========================================== */
|
|
function toggleHamburger() {
|
|
const navLinks = document.getElementById('navLinks');
|
|
const hamburger = document.querySelector('.hamburger');
|
|
navLinks.classList.toggle('mobile-open');
|
|
hamburger.classList.toggle('active');
|
|
}
|
|
|
|
// Initialisierung
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// ... dein bestehender Code ...
|
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
applyTheme(savedTheme);
|
|
|
|
// Hamburger Menü schließen bei Klick auf einen Link
|
|
const navLinksContainer = document.getElementById('navLinks');
|
|
const navLinks = navLinksContainer.querySelectorAll('a');
|
|
const hamburger = document.querySelector('.hamburger');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
// Prüfen, ob das Menü gerade offen ist
|
|
if (navLinksContainer.classList.contains('mobile-open')) {
|
|
navLinksContainer.classList.remove('mobile-open');
|
|
hamburger.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
/* ==========================================
|
|
DROPDOWN LOGIC (Vereinheitlicht)
|
|
========================================== */
|
|
const langBtn = document.getElementById('langBtn');
|
|
const langDropdown = document.getElementById('langDropdown');
|
|
const themeBtn = document.getElementById('themeBtn');
|
|
const themeDropdown = document.getElementById('themeDropdown');
|
|
|
|
// Funktion zum Schließen aller Dropdowns
|
|
function closeAllDropdowns() {
|
|
if (langDropdown) langDropdown.classList.remove('show');
|
|
if (themeDropdown) themeDropdown.classList.remove('show');
|
|
}
|
|
|
|
// Event Listener für Sprach-Dropdown
|
|
if (langBtn) {
|
|
langBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
closeAllDropdowns();
|
|
langDropdown.classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
// Event Listener für Theme-Dropdown
|
|
if (themeBtn) {
|
|
themeBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
closeAllDropdowns();
|
|
themeDropdown.classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
// Klick außerhalb schließt alle
|
|
window.addEventListener('click', () => {
|
|
closeAllDropdowns();
|
|
});
|
|
|
|
/* ==========================================
|
|
LANGUAGE SWITCHER LOGIC
|
|
========================================== */
|
|
if (langDropdown) {
|
|
langDropdown.querySelectorAll('.theme-option').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const selectedLang = link.getAttribute('data-lang');
|
|
const currentPath = window.location.pathname;
|
|
|
|
// URL Logik: Pfad ersetzen
|
|
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
|
|
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
|
|
newPath = '/' + selectedLang + '/';
|
|
}
|
|
newPath = newPath.replace(/\/+/g, '/');
|
|
window.location.href = newPath;
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ==========================================
|
|
THEME SWITCHER LOGIC
|
|
========================================== */
|
|
const themeOptions = document.querySelectorAll('#themeDropdown .theme-option');
|
|
const htmlEl = document.documentElement;
|
|
|
|
themeOptions.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const action = btn.getAttribute('data-theme');
|
|
let theme;
|
|
if (action === 'setdark') theme = 'dark';
|
|
else if (action === 'setlight') theme = 'light';
|
|
else theme = 'auto';
|
|
|
|
applyTheme(theme);
|
|
});
|
|
});
|
|
|
|
function applyTheme(theme) {
|
|
if (theme === 'auto') {
|
|
localStorage.removeItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
|
themeBtn.innerHTML = '🌓';
|
|
} else {
|
|
htmlEl.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
|
|
}
|
|
}
|
|
|