Add mobile toggle to left navigation

patterns/left-navigation.html

@@ -19,9 +19,21 @@
     <div class="sg-left-navigation-pattern__surface">
       <div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">
         <aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation">
+          <div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">
             <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
 
-          <nav class="sg-tab-button-group" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
+            <button
+              class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle"
+              type="button"
+              data-left-navigation-toggle
+              aria-expanded="true"
+              aria-controls="left-navigation-menu"
+            >
+              Ausblenden
+            </button>
+          </div>
+
+          <nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button>
             <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button>
@@ -35,5 +47,54 @@
     </div>
   </section>
 
+  <script>
+    (() => {
+      const mediaQuery = window.matchMedia('(max-width: 767px)');
+      const toggle = document.querySelector('[data-left-navigation-toggle]');
+      const menu = document.getElementById('left-navigation-menu');
+
+      if (!toggle || !menu) {
+        return;
+      }
+
+      const setMenuState = (expanded) => {
+        menu.hidden = !expanded;
+        toggle.setAttribute('aria-expanded', String(expanded));
+        toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';
+        toggle.classList.toggle('sg-button--active', expanded);
+        toggle.classList.toggle('sg-button--inactive', !expanded);
+      };
+
+      const syncMode = () => {
+        if (mediaQuery.matches) {
+          if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
+            setMenuState(true);
+            return;
+          }
+
+          setMenuState(toggle.getAttribute('aria-expanded') !== 'false');
+          return;
+        }
+
+        menu.hidden = false;
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.textContent = 'Ausblenden';
+        toggle.classList.add('sg-button--active');
+        toggle.classList.remove('sg-button--inactive');
+      };
+
+      toggle.addEventListener('click', () => {
+        if (!mediaQuery.matches) {
+          return;
+        }
+
+        setMenuState(menu.hidden);
+      });
+
+      syncMode();
+      mediaQuery.addEventListener('change', syncMode);
+    })();
+  </script>
+
 </body>
 </html>

styles/29-patterns-left-navigation.css

@@ -24,6 +24,10 @@
   min-width: 0;
 }
 
+.sg-left-navigation-pattern__header-row {
+  display: none;
+}
+
 .sg-left-navigation-pattern__group-card {
   min-width: 0;
 }
@@ -43,9 +47,21 @@
     flex-direction: column;
   }
 
+  .sg-left-navigation-pattern__header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-small);
+    margin-bottom: 0;
+  }
+
   .sg-left-navigation-pattern__group-card--navigation {
     flex: 0 0 auto;
     width: 100%;
     max-width: none;
   }
+
+  .sg-left-navigation-pattern__toggle {
+    flex: 0 0 auto;
+  }
 }