diff --git a/patterns/left-navigation.html b/patterns/left-navigation.html
index a6d785a..f764ed0 100644
--- a/patterns/left-navigation.html
+++ b/patterns/left-navigation.html
@@ -41,7 +41,9 @@
-
+
@@ -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);
})();