multi lang mit hugo
This commit is contained in:
113
static/script.js
Normal file
113
static/script.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/* ==========================================
|
||||
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;
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user