From 4cabfe2daf825c126b29973c433890482ce7c25d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 17:29:40 +0200
Subject: [PATCH] Move sandwich menu into blue header and right-align mode
 toggle in controls card

---
 ...card-listen-fundamentalanalyse-drawer.html | 30 +++++++++----------
 styleguide.css                                |  9 +++++-
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index c44ba67..1517aa4 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -24,8 +24,22 @@
     </div>
 
     <article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
-      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="card-header">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-inline-header-row" data-pattern-part="card-header">
         <h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
+        <div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
+          <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
+            <span class="sg-sandwich-button__icon" aria-hidden="true">
+              <span class="sg-sandwich-button__line"></span>
+              <span class="sg-sandwich-button__line"></span>
+              <span class="sg-sandwich-button__line"></span>
+            </span>
+          </button>
+          <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
+            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+          </div>
+        </div>
       </header>
       <div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
         <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
@@ -66,20 +80,6 @@
           </span>
           <span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
         </button>
-        <div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
-          <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
-            <span class="sg-sandwich-button__icon" aria-hidden="true">
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-            </span>
-          </button>
-          <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-          </div>
-        </div>
       </div>
     </article>
     <div class="sg-transparent-card sg-analysis-intro-block" data-component="transparent-card">
diff --git a/styleguide.css b/styleguide.css
index 760c780..e5417bf 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2143,11 +2143,18 @@ section + section {
   --surface-card-body: var(--surface-card-segment-neutral);
 }
 
-.sg-card-segment.sg-inline-controls-row {
+.sg-card-segment.sg-inline-header-row {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-small);
+}
+
+.sg-card-segment.sg-inline-controls-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-small);
   flex-wrap: nowrap;
 }