From 3e05839dc8abdc91c3d4aa80147a92196fd44fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 18 Jun 2026 12:07:50 +0200
Subject: [PATCH] Add mobile tab switcher for VSF list detail

---
 patterns/vsf-list-detailseite.html         | 68 ++++++++++++++++++----
 styles/33-layouts-vsf-list-detailseite.css | 17 ++++--
 2 files changed, 70 insertions(+), 15 deletions(-)
diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 3227668..e03c20a 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -8,8 +8,13 @@
 </head>
 <body>
   <section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
-    <div class="sg-vsf-list-detail-page__content">
-      <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
+    <div class="sg-tab-button-group sg-vsf-list-detail-page__mobile-tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-list-detail-panel-meldungen" id="vsf-list-detail-tab-meldungen" data-component-part="tab-button" data-vsf-list-detail-tab="meldungen">Meldungen</button>
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-list-detail-panel-unternehmen" id="vsf-list-detail-tab-unternehmen" data-component-part="tab-button" data-vsf-list-detail-tab="unternehmen">Unternehmen</button>
+    </div>
+
+    <div class="sg-vsf-list-detail-page__content" data-vsf-list-detail-active="meldungen">
+      <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen" role="tabpanel" aria-labelledby="vsf-list-detail-tab-meldungen" id="vsf-list-detail-panel-meldungen" data-vsf-list-detail-panel="meldungen">
         <div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
           <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
             <div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
@@ -101,7 +106,7 @@
         </div>
       </aside>
 
-      <div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
+      <div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten" role="tabpanel" aria-labelledby="vsf-list-detail-tab-unternehmen" id="vsf-list-detail-panel-unternehmen" data-vsf-list-detail-panel="unternehmen">
         <div class="sg-group-card" data-component="group-card">
           <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
           <div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
@@ -230,17 +235,58 @@
       });
     };
 
-    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
-      group.querySelectorAll('.sg-tab-button').forEach((button) => {
+    const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
+    const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
+    const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
+    const vsfListDetailPanels = {
+      meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
+      unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
+    };
+    const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
+
+    const syncVsfListDetailMobileState = (activeKey) => {
+      const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
+
+      if (vsfListDetailPage) {
+        vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
+      }
+
+      vsfListDetailButtons.forEach((button) => {
+        const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
+        button.setAttribute('aria-selected', String(isActive));
+        button.dataset.componentState = isActive ? 'active' : 'inactive';
+      });
+
+      const isMobile = vsfListDetailMobileQuery.matches;
+      Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
+        if (!panel) {
+          return;
+        }
+
+        panel.hidden = isMobile && key !== nextActiveKey;
+        panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
+      });
+    };
+
+    if (vsfListDetailMobileTabs) {
+      vsfListDetailButtons.forEach((button) => {
         button.addEventListener('click', () => {
-          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
-            const isActive = otherButton === button;
-            otherButton.setAttribute('aria-selected', String(isActive));
-            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
-          });
+          syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
         });
       });
-    });
+    }
+
+    const handleVsfListDetailMobileModeChange = () => {
+      syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
+    };
+
+    if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
+      vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
+    } else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
+      vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
+    }
+
+    syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
 
     document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
       const button = wrap.querySelector('.sg-sandwich-button');
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index d360a7f..1944cd7 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -39,6 +39,10 @@
   width: 100%;
 }
 
+.sg-vsf-list-detail-page__mobile-tabs {
+  display: none;
+}
+
 .sg-vsf-list-detail-page__left-column {
   width: 30%;
   min-width: 30%;
@@ -78,8 +82,10 @@
 }
 
 @media (max-width: 767px) {
-  .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+  .sg-vsf-list-detail-page__mobile-tabs {
+    display: flex;
     width: 100%;
+    margin-bottom: var(--spacing-large);
   }
 
   .sg-vsf-list-detail-page__content {
@@ -95,9 +101,12 @@
     width: 100%;
   }
 
-  .sg-vsf-list-detail-page__left-column .sg-group-card,
-  .sg-vsf-list-detail-page__right-column .sg-group-card {
-    margin-bottom: var(--spacing-large);
+  .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
+    width: 100%;
+  }
+
+  .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
+    display: none;
   }
 
   .sg-vsf-list-detail-page__mobile-toggle {
