119 lines
5.1 KiB
HTML
119 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Pattern Left Navigation</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Pattern – Left Navigation</h1>
|
||
|
||
<section id="pattern-left-navigation" class="sg-left-navigation-pattern">
|
||
<p class="sg-preview-label">Pattern: Left Navigation</p>
|
||
<p class="sg-body">
|
||
Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen.
|
||
</p>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>
|
||
</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">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-heading>Übersicht</h2>
|
||
</section>
|
||
</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');
|
||
const contentHeading = document.querySelector('[data-left-navigation-content-heading]');
|
||
|
||
if (!toggle || !menu) {
|
||
return;
|
||
}
|
||
|
||
const setMenuState = (expanded) => {
|
||
menu.hidden = !expanded;
|
||
menu.classList.toggle('sg-left-navigation-pattern__menu--collapsed', !expanded);
|
||
toggle.setAttribute('aria-expanded', String(expanded));
|
||
toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';
|
||
toggle.classList.add('sg-button--active');
|
||
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') {
|
||
setMenuState(true);
|
||
return;
|
||
}
|
||
|
||
setMenuState(toggle.getAttribute('aria-expanded') !== 'false');
|
||
return;
|
||
}
|
||
|
||
menu.hidden = false;
|
||
menu.classList.remove('sg-left-navigation-pattern__menu--collapsed');
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
toggle.textContent = 'Ausblenden';
|
||
toggle.classList.add('sg-button--active');
|
||
toggle.classList.remove('sg-button--inactive');
|
||
};
|
||
|
||
toggle.addEventListener('click', () => {
|
||
setMenuState(menu.hidden);
|
||
});
|
||
|
||
menu.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
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);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|