From c3496663a85447e1472a1d3be65abffd909e6474 Mon Sep 17 00:00:00 2001 From: Timo Frank Date: Wed, 29 Jul 2026 11:00:29 +0200 Subject: [PATCH] Pages-Startseitenleiste bereinigen --- frontend/app/versorgungs-kompass.css | 75 ++++++++++++++++++++++++++++ frontend/app/versorgungs-kompass.js | 2 + tests/delivery-ui.spec.js | 47 +++++++++++++++++ 3 files changed, 124 insertions(+) diff --git a/frontend/app/versorgungs-kompass.css b/frontend/app/versorgungs-kompass.css index 857582b..bf02a74 100644 --- a/frontend/app/versorgungs-kompass.css +++ b/frontend/app/versorgungs-kompass.css @@ -40057,3 +40057,78 @@ border-radius: 999px; background-clip: padding-box; } + + /* Match the public GKE entry rail while the full Pages app is on its home view. */ + .app-shell.is-public-demo-profile[data-active-view="home"] :is( + .sidebar-collapse, + .sidebar-nav, + .sidebar-account-section, + .sidebar-brand-word + ) { + display: none !important; + } + + @media (min-width: 761px) { + .app-shell.is-public-demo-profile[data-active-view="home"] { + grid-template-columns: 76px minmax(0, 1fr); + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .app-sidebar { + width: 76px; + padding: 22px 12px 18px; + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .sidebar-brand { + min-height: 58px; + align-items: flex-start; + justify-content: center; + padding: 7px 0 15px; + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .sidebar-brand .brand-mark { + width: 36px; + height: 36px; + flex: 0 0 36px; + margin: 0; + } + } + + @media (max-width: 760px) { + .app-shell.is-public-demo-profile[data-active-view="home"] { + --mobile-sidebar-header-height: 64px; + } + + .app-shell.is-public-demo-profile[data-active-view="home"]::after { + display: none; + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .app-sidebar { + width: 100vw !important; + min-width: 100vw !important; + max-width: 100vw !important; + height: 64px !important; + min-height: 64px; + padding: 8px 14px !important; + background: linear-gradient(100deg, var(--sidebar-bg), var(--sidebar-bg-strong)); + box-shadow: none; + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .sidebar-brand { + position: static; + inset: auto; + width: 48px; + min-height: 48px; + align-items: center; + justify-content: center; + gap: 0; + padding: 6px; + overflow: visible; + } + + .app-shell.is-public-demo-profile[data-active-view="home"] .sidebar-brand .brand-mark { + width: 34px; + height: 34px; + flex: 0 0 34px; + margin: 0; + } + } diff --git a/frontend/app/versorgungs-kompass.js b/frontend/app/versorgungs-kompass.js index 63cbfc8..09b2153 100644 --- a/frontend/app/versorgungs-kompass.js +++ b/frontend/app/versorgungs-kompass.js @@ -1121,6 +1121,7 @@ const MAP_MESSAGE_VERSION = 1; const MAP_MESSAGE_CHANNELS = new Set(["contacts", "stakeholders"]); const appShell = document.querySelector(".app-shell"); + appShell?.classList.toggle("is-public-demo-profile", IS_PUBLIC_DEMO_PROFILE); const skipLink = document.querySelector(".skip-link"); const mainContent = document.getElementById("main-content"); const routeAnnouncer = document.getElementById("route-announcer"); @@ -38387,6 +38388,7 @@ handleRovingTabKeydown(event, stakeholderTypeActions.querySelectorAll('[role="tab"]')); }); const initialSidebarRouteView = routeViewFromLocation() || "home"; + if (appShell) appShell.dataset.activeView = initialSidebarRouteView; const transientInitialHomeSidebarCollapse = !isMobileLayout() && initialSidebarRouteView === "home"; if (transientInitialHomeSidebarCollapse) { setSidebarCollapsed(true, { persist: false }); diff --git a/tests/delivery-ui.spec.js b/tests/delivery-ui.spec.js index 4993b5e..9c26446 100644 --- a/tests/delivery-ui.spec.js +++ b/tests/delivery-ui.spec.js @@ -3,6 +3,25 @@ import { gotoAuthenticated } from "./helpers/app-test-session.js"; const PAGES_APP = "/dist/pages/versorgungs-kompass.html"; +async function expectCleanHomeSidebar(page) { + await expect(page.locator(".app-shell")).toHaveClass(/is-public-demo-profile/); + const sidebar = page.locator(".app-sidebar"); + await expect(page.locator(".app-shell")).toHaveAttribute("data-active-view", "home"); + await expect(sidebar.locator(".sidebar-brand")).toBeVisible(); + await expect(sidebar.locator(".sidebar-brand .brand-mark")).toBeVisible(); + await expect(sidebar.locator(".sidebar-brand-word")).toBeHidden(); + await expect(sidebar.locator(".sidebar-collapse")).toBeHidden(); + await expect(sidebar.locator(".sidebar-nav")).toBeHidden(); + await expect(sidebar.locator(".sidebar-account-section")).toBeHidden(); + await expect(sidebar.locator("button:visible")).toHaveCount(0); + await expect(sidebar.locator("a:visible")).toHaveCount(1); + if ((page.viewportSize()?.width || 0) <= 760) { + await expect(sidebar).toHaveCSS("height", "64px"); + } else { + await expect(sidebar).toHaveCSS("width", "76px"); + } +} + test("Desktop-Auslieferung: Pages startet direkt in der App-Startseite", async ({ page }, testInfo) => { await page.emulateMedia({ reducedMotion: "no-preference" }); await page.addInitScript(() => { @@ -18,6 +37,7 @@ test("Desktop-Auslieferung: Pages startet direkt in der App-Startseite", async ( await expect(page.locator('body[data-public-entry="home"], [data-public-entry-styles]')).toHaveCount(0); await expect(page.locator(".app-sidebar")).toBeVisible(); await expect(page.locator('[data-view-panel="home"]')).toBeVisible(); + await expectCleanHomeSidebar(page); const destinations = page.locator(".home-destination-link"); await expect(destinations).toHaveCount(4); await expect(destinations.locator("strong")).toHaveText([ @@ -109,9 +129,17 @@ test("Startkarte öffnet den passenden Navigationsbereich auf Desktop", async ({ await expect(page).toHaveURL(/#framework$/); await expect(shell).not.toHaveClass(/is-sidebar-collapsed/); + await expect(page.locator(".sidebar-collapse")).toBeVisible(); + await expect(page.locator(".sidebar-nav")).toBeVisible(); + await expect(page.locator(".sidebar-account-section")).toBeVisible(); + await expect(page.locator(".sidebar-brand-word")).toBeVisible(); await expect(page.locator('[data-sidebar-section="planning"]')).toHaveClass(/is-active-section/); await expect(page.locator('[data-sidebar-section-toggle="planning"]')).toHaveAttribute("aria-expanded", "true"); await expect(page.locator('[data-view-tab="framework"]')).toHaveAttribute("aria-current", "page"); + + await page.goBack(); + await expect(page).toHaveURL(/\/dist\/pages\/index\.html$/); + await expectCleanHomeSidebar(page); }); test("Startkarte öffnet und fokussiert die mobile Navigation", async ({ page }) => { @@ -123,9 +151,17 @@ test("Startkarte öffnet und fokussiert die mobile Navigation", async ({ page }) await expect(page).toHaveURL(/#stakeholders\/kv$/); await expect(shell).toHaveClass(/is-mobile-sidebar-expanded/); + await expect(page.locator(".sidebar-collapse")).toBeVisible(); + await expect(page.locator(".sidebar-nav")).toBeVisible(); + await expect(page.locator(".sidebar-account-section")).toBeVisible(); + await expect(page.locator(".sidebar-brand-word")).toBeVisible(); await expect(page.locator('[data-sidebar-section="stakeholders"]')).toHaveClass(/is-active-section/); await expect(page.locator('[data-sidebar-section-toggle="stakeholders"]')).toHaveAttribute("aria-expanded", "true"); await expect(page.locator('[data-sidebar-section="stakeholders"] .primary-tab.is-active')).toBeFocused(); + + await page.locator("#brand-home-link").click(); + await expect(page).toHaveURL(/#home$/); + await expectCleanHomeSidebar(page); }); test("Mobile-Auslieferung: Startklar-Hinweis bleibt oberhalb der Fußzeile", async ({ page }) => { @@ -151,6 +187,17 @@ test("Mobile-Auslieferung: Startklar-Hinweis bleibt oberhalb der Fußzeile", asy test("Geschützte Auslieferung: Kontakte werden motivierend als startklar angekündigt", async ({ page }) => { await gotoAuthenticated(page, "/frontend/app/versorgungs-kompass.html#home"); + const shell = page.locator(".app-shell"); + await expect(shell).not.toHaveClass(/is-public-demo-profile/); + await expect(page.locator(".sidebar-collapse")).toBeVisible(); + await expect(page.locator(".sidebar-brand-word")).toBeVisible(); + if ((page.viewportSize()?.width || 0) <= 760) { + await expect(page.locator(".sidebar-nav")).toBeHidden(); + await expect(page.locator(".sidebar-account-section")).toBeHidden(); + } else { + await expect(page.locator(".sidebar-nav")).toBeVisible(); + await expect(page.locator(".sidebar-account-section")).toBeVisible(); + } const status = page.locator("#global-status"); await expect(status).toBeVisible(); await expect(status).toHaveText(/Startklar: \d+ Kontakte stehen bereit\./);