From f6159f92ebe82a020aa179ae1ea431856b093e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 4 Jun 2026 17:34:20 +0200 Subject: [PATCH] Add left navigation pattern --- index.html | 1 + patterns/left-navigation.html | 39 ++++++++++++++++++++ styleguide.css | 1 + styles/29-patterns-left-navigation.css | 51 ++++++++++++++++++++++++++ 4 files changed, 92 insertions(+) create mode 100644 patterns/left-navigation.html create mode 100644 styles/29-patterns-left-navigation.css diff --git a/index.html b/index.html index e24fd7d..3643483 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@
  • Object Card
  • Object Group Card
  • Navigation Card
    • +
  • Left Navigation
  • Notifications
  • Content Cards Group
  • Card Gruppe mit Tastennavigation
    • diff --git a/patterns/left-navigation.html b/patterns/left-navigation.html new file mode 100644 index 0000000..8999e35 --- /dev/null +++ b/patterns/left-navigation.html @@ -0,0 +1,39 @@ + + + + + + Styleguide – Pattern Left Navigation + + + + +

    Pattern – Left Navigation

    + +
    +

    Pattern: Left Navigation

    +

    + 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. +

    + +
    +
    + + + +
    +
    +
    + + + diff --git a/styleguide.css b/styleguide.css index 7ee74cb..66b3a38 100644 --- a/styleguide.css +++ b/styleguide.css @@ -11,6 +11,7 @@ @import "./styles/26-patterns-vsf-list-card.css"; @import "./styles/27-patterns-delete-confirmation.css"; @import "./styles/28-patterns-notifications.css"; +@import "./styles/29-patterns-left-navigation.css"; @import "./styles/30-layouts-card-list-page.css"; @import "./styles/33-layouts-vsf-list-detailseite.css"; @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css"; diff --git a/styles/29-patterns-left-navigation.css b/styles/29-patterns-left-navigation.css new file mode 100644 index 0000000..c7c51b2 --- /dev/null +++ b/styles/29-patterns-left-navigation.css @@ -0,0 +1,51 @@ +/* ========================================================= */ +/* Patterns: Left Navigation */ +/* ========================================================= */ + +.sg-left-navigation-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-left-navigation-pattern__surface { + width: 100%; + box-sizing: border-box; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--color-light-grey); +} + +.sg-left-navigation-pattern__layout { + display: flex; + align-items: stretch; + gap: var(--spacing-large); + width: 100%; + min-width: 0; +} + +.sg-left-navigation-pattern__group-card { + min-width: 0; +} + +.sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 15vw; + width: 15vw; + max-width: 15vw; +} + +.sg-left-navigation-pattern__group-card--content { + flex: 1 1 auto; +} + +@media (max-width: 767px) { + .sg-left-navigation-pattern__layout { + flex-direction: column; + } + + .sg-left-navigation-pattern__group-card--navigation { + flex: 0 0 auto; + width: 100%; + max-width: none; + } +}