68 lines
2.3 KiB
JavaScript
68 lines
2.3 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');
|
|
});
|
|
}
|
|
|
|
// 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 Dropdown
|
|
window.addEventListener('click', () => {
|
|
if (themeDropdown) themeDropdown.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');
|
|
});
|
|
}); |