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

Add left navigation pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 17:34:20 +02:00
parent aabe66cef4
commit f6159f92eb
4 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -44,6 +44,7 @@
<li><a href="./patterns/object-card.html">Object Card</a></li>
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
<li><a href="./patterns/left-navigation.html">Left Navigation</a></li>
<li><a href="./patterns/notifications.html">Notifications</a></li>
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
patterns/left-navigation.html
+39
View File
@@ -0,0 +1,39 @@
<!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__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>
<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-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>
</div>
</section>
</body>
</html>
styleguide.css
+1
View File
@@ -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";
styles/29-patterns-left-navigation.css
+51
View File
@@ -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;
}
}