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>

index.html

@@ -13,11 +13,17 @@
       <div id="lottie-logo" style="width:80px;height:80px;flex-shrink:0"></div>
       <h1 style="margin-bottom:0">Pigmento</h1>
     </div>
-    <nav>
+    <nav id="main-nav">
+      <button id="menu-toggle" aria-label="Navigation öffnen">
+        <span></span><span></span><span></span>
+      </button>
+      <span id="menu-active-label">Picker</span>
+      <div id="menu-dropdown">
         <button class="tab-btn active" data-tab="picker">Picker</button>
         <button class="tab-btn" data-tab="eingabe">Eingabe</button>
         <button class="tab-btn" data-tab="harmonien">Harmonien</button>
         <button class="tab-btn" data-tab="sammlung">Sammlung</button>
+      </div>
     </nav>
   </header>
 

js/app.js

@@ -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');
   });
 });
 

style.css

@@ -42,21 +42,74 @@ main {
 
 header h1 { font-size: 3rem; margin-bottom: 0; }
 
-nav { display: flex; gap: 0.5rem; }
+#main-nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
 
-.tab-btn {
-  padding: 0.4rem 1rem;
+#menu-toggle {
+  background: none;
   border: 1px solid #ccc;
   border-radius: 6px;
+  cursor: pointer;
+  padding: 0.45rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  line-height: 0;
+}
+
+#menu-toggle span {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background: #222;
+  border-radius: 2px;
+}
+
+#menu-toggle:hover { background: #f0f0f0; }
+
+#menu-active-label {
+  font-size: 0.9rem;
+  color: #444;
+}
+
+#menu-dropdown {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
   background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
+  padding: 0.4rem;
+  z-index: 50;
+  min-width: 170px;
+}
+
+#menu-dropdown.open { display: flex; }
+
+.tab-btn {
+  padding: 0.55rem 0.9rem;
+  border: none;
+  border-radius: 6px;
+  background: none;
   cursor: pointer;
   font-size: 0.9rem;
+  font-family: 'Poppins', sans-serif;
+  text-align: left;
+  color: #222;
 }
 
+.tab-btn:hover { background: #f5f5f5; }
+
 .tab-btn.active {
   background: #222;
   color: #fff;
-  border-color: #222;
 }
 
 main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }