From 5c14b26a029477adae87c06b822a594cedac5db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 16:28:05 +0200
Subject: [PATCH] Add options row above analysis heading with mode toggle and
 small sandwich menu

---
 ...card-listen-fundamentalanalyse-drawer.html | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 75e7241..8359c92 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -60,6 +60,33 @@
     <p class="sg-strong sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width sg-vsf-drawer-next-earnings" data-pattern-part="text-block-full-width">
       Nächste Quartalszahlen: nicht bekannt
     </p>
+    <div class="sg-options-row" aria-label="Fundamentalanalyse Optionen" data-pattern="options-row">
+      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
+        <button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
+          <span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
+          <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+            <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+          </span>
+          <span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
+        </button>
+      </div>
+      <div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
+        <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>
+    </div>
     <h2 class="sg-heading-h2 sg-vsf-fundamental-analysis-heading">Fundamentalanalyse vom 12.5.2026</h2>
     <div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
       <div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Fundamentalanalyse Navigation" data-component="tab-navigation" data-component-size="large">
@@ -197,6 +224,46 @@
       });
     }
 
+    document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
+        toggle.dataset.active = nextState;
+        toggle.dataset.componentState = nextState;
+        toggle.setAttribute(
+          'aria-label',
+          `Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
+        );
+      });
+    });
+
+    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-sandwich-button');
+      if (!button) {
+        return;
+      }
+
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      if (event.target.closest('.sg-sandwich-menu-wrap')) {
+        return;
+      }
+
+      document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+        const button = wrap.querySelector('.sg-sandwich-button');
+        wrap.dataset.open = 'false';
+        if (button) {
+          button.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
+
     const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
 
     if (tabGroup) {