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