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 @@
@@ -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) {