Add content heading to left navigation

patterns/left-navigation.html

@@ -41,7 +41,9 @@
         </nav>
       </aside>
 
-      <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
+      <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true">
+        <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-heading>Übersicht</h2>
+      </section>
     </div>
   </section>
 
@@ -50,6 +52,7 @@
       const mediaQuery = window.matchMedia('(max-width: 767px)');
       const toggle = document.querySelector('[data-left-navigation-toggle]');
       const menu = document.getElementById('left-navigation-menu');
+      const contentHeading = document.querySelector('[data-left-navigation-content-heading]');
 
       if (!toggle || !menu) {
         return;
@@ -64,6 +67,14 @@
         toggle.classList.remove('sg-button--inactive');
       };
 
+      const setContentHeading = (button) => {
+        if (!contentHeading || !button) {
+          return;
+        }
+
+        contentHeading.textContent = button.textContent.trim();
+      };
+
       const syncMode = () => {
         if (mediaQuery.matches) {
           if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
@@ -92,9 +103,12 @@
           menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
             otherButton.setAttribute('aria-selected', String(otherButton === button));
           });
+
+          setContentHeading(button);
         });
       });
 
+      setContentHeading(menu.querySelector('.sg-tab-button[aria-selected="true"]'));
       syncMode();
       mediaQuery.addEventListener('change', syncMode);
     })();