Skip to content

Landing page: hide the empty mobile hamburger - #4068

Open
reakaleek wants to merge 6 commits into
mainfrom
fix/hide-landing-hamburger
Open

reakaleek wants to merge 6 commits into
mainfrom
fix/hide-landing-hamburger

Conversation

@reakaleek

@reakaleek reakaleek commented Sep 10, 2026

Copy link
Copy Markdown
Member

The docs landing page no longer shows a hamburger that opens an empty drawer. Article pages keep the hamburger on the left of the version picker, and the picker sits 24px under the secondary nav at every width.

Affects: Site UI, Navigation

Prompt summary: Hide the empty hamburger on the docs landing page. Later asks on the same branch keep that hamburger when navigation-preview fills the drawer, put it left of the version picker, and add space between the secondary nav and the version picker.

Why

The assembler site-root nav HTML is always empty. The landing layout still rendered a hamburger when TopNav or the version dropdown existed, so the drawer opened blank with navigation-preview off. When that flag is on, the same drawer holds section and version controls, so landing needs the hamburger. On article pages the TOC row did not reverse on small screens, and #toc-nav only padded from 1280px up, so the version picker sat flush on the secondary nav at laptop widths.

What

Landing hamburger

The landing hamburger renders only when the mobile drawer has content: non-empty NavigationHtml, or navigation-preview with top-nav links or a version dropdown. Flag-off landing stays empty-hamburger-free.

Mobile TOC row

The TOC row uses flex-row-reverse below md so the hamburger is on the left and the version picker is on the right. Both controls share one baseline.

Version picker spacing

#toc-nav now has 24px top padding at every width, matching the breadcrumbs. Below 1280px the picker no longer sits on the secondary nav border.

Tests

Landing layout tests cover the empty-hamburger case and the navigation-preview drawer. TOC tests assert the reversed row.

Verify

dotnet test tests/Navigation.Tests/ --filter "FullyQualifiedName~LandingLayoutRenderingTests|FullyQualifiedName~TableOfContentsRenderingTests"

On an article page, check a phone width and a window around 1100px: hamburger left of the version picker, 24px under the secondary nav. On / with navigation-preview off, there is no hamburger.

Out of scope: Article pages still open the pages-nav drawer from the TOC hamburger. Flag-off landing has no mobile pages-nav entry point.

reakaleek and others added 2 commits September 10, 2026 12:29
The assembler landing page still paints a hamburger when TopNav exists, even though the site-root drawer has no links. This test renders that layout and expects the control to be absent.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The site-root nav HTML is always empty, and the landing drawer only fills when navigation-preview is on. The hamburger still appeared because TopNav exists, so mobile users opened a blank panel.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Landing no longer reads RenderHamburgerIcon, and the test no longer needs a TopNav parent to reproduce the empty drawer.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

Copy link
Copy Markdown
Contributor

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4068/

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved — no blocking issues found.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

The version dropdown is first in the TOC DOM, so mobile flex must reverse and space the two controls apart.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
With the flag on, mobile hides the desktop top bar and puts section and version controls in the pages drawer. The landing page is the only layout without a TOC hamburger, so it still needs that trigger when the drawer has content.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
#toc-nav only had top padding from 1280px up, so at laptop widths the picker sat flush on the secondary nav.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

@Mpdreamz Mpdreamz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the rendering change and tests. The new landing predicate lines up with what the mobile pages drawer actually renders, and CI is green.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants