113 lines
3.9 KiB
JavaScript
113 lines
3.9 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');
|
|
}
|
|
|
|
/* ==========================================
|
|
THEME SWITCHER LOGIC
|
|
========================================== */
|
|
const themeBtn = document.getElementById('themeBtn');
|
|
const themeDropdown = document.getElementById('themeDropdown');
|
|
const themeButtons = document.querySelectorAll('.theme-dropdown button');
|
|
const htmlEl = document.documentElement;
|
|
|
|
// Dropdown öffnen/schließen
|
|
if (themeBtn) {
|
|
themeBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
themeDropdown.classList.toggle('show');
|
|
// Schließe andere Dropdowns
|
|
if (langDropdown) langDropdown.classList.remove('show');
|
|
});
|
|
}
|
|
|
|
// Theme auswählen
|
|
themeButtons.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const theme = btn.getAttribute('data-theme');
|
|
applyTheme(theme);
|
|
themeDropdown.classList.remove('show');
|
|
});
|
|
});
|
|
|
|
// Theme anwenden
|
|
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' ? '🌙' : '☀️';
|
|
}
|
|
}
|
|
|
|
// Initialisierung beim Laden
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
applyTheme(savedTheme);
|
|
});
|
|
|
|
// Klick außerhalb schließt alle Dropdowns
|
|
window.addEventListener('click', () => {
|
|
if (themeDropdown) themeDropdown.classList.remove('show');
|
|
if (langDropdown) langDropdown.classList.remove('show');
|
|
});
|
|
|
|
// Mobile Menü schließen bei Klick auf Link
|
|
document.querySelectorAll('.nav-links a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
document.getElementById('navLinks').classList.remove('mobile-open');
|
|
const hamburger = document.querySelector('.hamburger');
|
|
if (hamburger) hamburger.classList.remove('active');
|
|
});
|
|
});
|
|
|
|
|
|
/* ==========================================
|
|
LANGUAGE SWITCHER LOGIC
|
|
========================================== */
|
|
const langBtn = document.getElementById('langBtn');
|
|
const langDropdown = document.getElementById('langDropdown');
|
|
|
|
if (langBtn) {
|
|
langBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
langDropdown.classList.toggle('show');
|
|
// Schließe andere Dropdowns
|
|
if (themeDropdown) themeDropdown.classList.remove('show');
|
|
});
|
|
}
|
|
|
|
// Sprachwechsel Logik (Repariert für alle Sprachen)
|
|
if (langDropdown) {
|
|
langDropdown.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault(); // Verhindert das sofortige Neuladen
|
|
|
|
const selectedLang = link.getAttribute('data-lang');
|
|
const currentPath = window.location.pathname; // z.B. /de/projects/
|
|
|
|
// RegEx um den aktuellen Sprachcode (/de/, /en/, /fr/, etc.) am Anfang zu finden
|
|
// und durch die neue Sprache zu ersetzen.
|
|
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
|
|
|
|
// Falls man auf der Hauptseite ist (/), oder RegEx nicht matcht
|
|
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
|
|
newPath = '/' + selectedLang + '/';
|
|
}
|
|
|
|
// Sicherstellen, dass keine Doppel-Slashes entstehen
|
|
newPath = newPath.replace(/\/+/g, '/');
|
|
|
|
window.location.href = newPath;
|
|
});
|
|
});
|
|
} |