gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile toggle to left navigation

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 17:38:21 +02:00
parent f6159f92eb
commit 3611d9732f
2 changed files with 79 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/left-navigation.html
+63 -2
View File
@@ -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">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
<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>