161 lines
8.2 KiB
HTML
161 lines
8.2 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">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-heading>Übersicht</h2>
|
||
<p class="sg-body sg-left-navigation-pattern__content-text">
|
||
Zeile 1: Überblick über die aktuelle Navigation.<br>
|
||
Zeile 2: Die Inhalte orientieren sich am aktiven Menüpunkt.<br>
|
||
Zeile 3: Jede Auswahl aktualisiert die Überschrift.<br>
|
||
Zeile 4: Die Content-Card bleibt optisch eigenständig.<br>
|
||
Zeile 5: Der Aufbau folgt dem linken Navigationsbereich.<br>
|
||
Zeile 6: Die Breite bleibt flexibel innerhalb des Layouts.<br>
|
||
Zeile 7: Lange Inhalte werden im Card-Rahmen geführt.<br>
|
||
Zeile 8: Der Text dient als Platzhalter für spätere Inhalte.<br>
|
||
Zeile 9: Die Darstellung bleibt auf Desktop und Mobile stabil.<br>
|
||
Zeile 10: Die Navigation links steuert den sichtbaren Zustand.<br>
|
||
Zeile 11: Der aktive Punkt ist visuell hervorgehoben.<br>
|
||
Zeile 12: Inaktive Punkte bleiben als klare Auswahloptionen sichtbar.<br>
|
||
Zeile 13: Die Content-Card reagiert auf den ausgewählten Eintrag.<br>
|
||
Zeile 14: Die Überschrift übernimmt den Namen des Menüpunkts.<br>
|
||
Zeile 15: Der Text kann später durch Fachinhalte ersetzt werden.<br>
|
||
Zeile 16: Die Gruppe bleibt als zusammenhängender Bereich lesbar.<br>
|
||
Zeile 17: Kartenabstände folgen den vorhandenen Styleguide-Tokens.<br>
|
||
Zeile 18: Keine lokalen Sonderregeln sind für den Demo-Text nötig.<br>
|
||
Zeile 19: Die Struktur bleibt bewusst einfach und nachvollziehbar.<br>
|
||
Zeile 20: Das Layout zeigt Navigation und Inhalt nebeneinander.<br>
|
||
Zeile 21: Der linke Bereich bleibt auf die Navigation fokussiert.<br>
|
||
Zeile 22: Der rechte Bereich zeigt den zugehörigen Inhalt.<br>
|
||
Zeile 23: Der Text dient als Füllmaterial für die Layoutprüfung.<br>
|
||
Zeile 24: Die Card-Höhe passt sich dem vorhandenen Inhalt an.<br>
|
||
Zeile 25: Scrollverhalten ist in diesem Demo-Zustand nicht nötig.<br>
|
||
Zeile 26: Die Darstellung bleibt ohne zusätzliche Interaktion verständlich.<br>
|
||
Zeile 27: Weitere Inhalte lassen sich später ergänzen oder ersetzen.<br>
|
||
Zeile 28: Die Auswahl folgt weiterhin dem Tab-Button-Verhalten.<br>
|
||
Zeile 29: Visuelle Konsistenz hat Vorrang vor dekorativen Effekten.<br>
|
||
Zeile 30: Der Demo-Text bleibt neutral und fachlich unaufgeladen.<br>
|
||
Zeile 31: Jede Zeile stützt die Prüfung der vertikalen Kartengröße.<br>
|
||
Zeile 32: Der Content-Bereich ist damit klar als gefüllte Fläche erkennbar.<br>
|
||
Zeile 33: Der Text nutzt die vorhandenen Typografie-Tokens.<br>
|
||
Zeile 34: Die Lesbarkeit bleibt auf hellem Inhaltshintergrund hoch.<br>
|
||
Zeile 35: Die Spaltenlogik wird durch den Text noch deutlicher.<br>
|
||
Zeile 36: Das Beispiel unterstützt die Wahrnehmung des Pattern-Rahmens.<br>
|
||
Zeile 37: Der Inhalt bleibt austauschbar und ohne Geschäftslogik.<br>
|
||
Zeile 38: Die Group Card dient als Container für den Demo-Inhalt.<br>
|
||
Zeile 39: Das Muster zeigt die vorgesehene Struktur des Portals.<br>
|
||
Zeile 40: Die finale Zeile schließt den Demo-Block sauber ab.
|
||
</p>
|
||
</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>
|