feat: Tab-Navigation als Hamburger-Menü

3-Striche-Button öffnet Dropdown mit allen Kategorien.
Aktive Kategorie wird neben dem Button angezeigt.
Klick außerhalb schließt das Menü.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-03 17:04:02 +02:00
parent 6da431bf7e
commit f70d02d11d
3 changed files with 82 additions and 9 deletions

View File

@@ -15,6 +15,18 @@ export const state = {
}
};
// Hamburger-Menü
const menuToggle = document.getElementById('menu-toggle');
const menuDropdown = document.getElementById('menu-dropdown');
const menuActiveLabel = document.getElementById('menu-active-label');
menuToggle.addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.classList.toggle('open');
});
document.addEventListener('click', () => menuDropdown.classList.remove('open'));
// Tab-Navigation
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
@@ -24,6 +36,8 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.add('active');
const section = document.getElementById('tab-' + tab);
if (section) section.classList.add('active');
menuActiveLabel.textContent = btn.textContent;
menuDropdown.classList.remove('open');
});
});