Sync styleguide 2026.05.18.1

2026-06-05 08:08:46 +02:00
parent 896e6bfddb
commit 4c67276645
13 changed files with 1148 additions and 2 deletions
@@ -0,0 +1,104 @@
+<!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"></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');
+
+      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 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));
+          });
+        });
+      });
+
+      syncMode();
+      mediaQuery.addEventListener('change', syncMode);
+    })();
+  </script>
+
+</body>
+</html>