From 4032e8e6b2327da8fdde2436a89d631bef2ff7c7 Mon Sep 17 00:00:00 2001 From: Evan Bonsignori Date: Mon, 17 Aug 2026 21:55:07 +0000 Subject: [PATCH] Close inline mobile nav when resizing up to desktop (#62419) --- .../tests/playwright-rendering.spec.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/fixtures/tests/playwright-rendering.spec.ts b/src/fixtures/tests/playwright-rendering.spec.ts index 56a0719bbe1c..aa352b0b7a7f 100644 --- a/src/fixtures/tests/playwright-rendering.spec.ts +++ b/src/fixtures/tests/playwright-rendering.spec.ts @@ -638,6 +638,30 @@ test.describe('test nav at different viewports', () => { await expect(page.locator('#main-content')).toBeVisible() }) + test('resizing from mobile to desktop closes the inline nav', async ({ page }) => { + // Start below the xxl (1400px) breakpoint where the inline mobile nav lives. + page.setViewportSize({ + width: 1013, + height: 700, + }) + await page.goto('/get-started/foo/bar') + + // Open the inline doc-tree nav from the secondary bar. + await page.getByTestId('sidebar-mobile-toggle').click() + const nav = page.locator('[data-container="nav"]') + await expect(nav).toHaveAttribute('data-mobile-open', 'true') + + // Resize up to the desktop breakpoint -- the inline nav should close and the + // fixed desktop rail (326px) should take over rather than the full-width + // mobile markup persisting over the page. + await page.setViewportSize({ + width: 1400, + height: 700, + }) + await expect(nav).toHaveAttribute('data-mobile-open', 'false') + await expect(nav).toHaveCSS('width', '326px') + }) + test('large -> x-large viewports - 1012+', async ({ page }) => { page.setViewportSize({ width: 1013,