diff --git a/patterns/left-navigation.html b/patterns/left-navigation.html index 476288d..755a9b0 100644 --- a/patterns/left-navigation.html +++ b/patterns/left-navigation.html @@ -61,8 +61,8 @@ 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); + toggle.classList.add('sg-button--active'); + toggle.classList.remove('sg-button--inactive'); }; const syncMode = () => { diff --git a/styles/29-patterns-left-navigation.css b/styles/29-patterns-left-navigation.css index 69501b3..e10ba50 100644 --- a/styles/29-patterns-left-navigation.css +++ b/styles/29-patterns-left-navigation.css @@ -28,6 +28,10 @@ display: none; } +.sg-left-navigation-pattern__toggle { + display: none; +} + .sg-left-navigation-pattern__group-card { min-width: 0; } @@ -55,13 +59,14 @@ margin-bottom: 0; } + .sg-left-navigation-pattern__toggle { + display: inline-flex; + flex: 0 0 auto; + } + .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; - } }