From 476003a0d0535fcbab926028555ffb3d824e573c Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 4 Sep 2026 11:14:17 +0200
Subject: [PATCH] Add a mobile open control on API pages

API pages already had the drawer and close control. They had no hamburger, so a phone user could not open the left nav.

Co-Authored-By: Cursor Grok 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/Elastic.ApiExplorer/_Layout.cshtml        |  1 +
 .../_Partials/Layout/_ApiMobileNavOpen.cshtml |  9 +++
 .../ApiMobileNavOpenRenderingTests.cs         | 77 +++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/Elastic.ApiExplorer/_Partials/Layout/_ApiMobileNavOpen.cshtml
 create mode 100644 tests/Elastic.ApiExplorer.Tests/ApiMobileNavOpenRenderingTests.cs

diff --git a/src/Elastic.ApiExplorer/_Layout.cshtml b/src/Elastic.ApiExplorer/_Layout.cshtml
index 2cf3bb5a3..3b4ea5fc7 100644
--- a/src/Elastic.ApiExplorer/_Layout.cshtml
+++ b/src/Elastic.ApiExplorer/_Layout.cshtml
@@ -29,6 +29,7 @@ else
 				<main id="content-container" class="w-full flex flex-col relative pb-12 overflow-x-hidden">
 					<article id="markdown-content" class="content-container markdown-content md:px-4">
 						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+						@await RenderPartialAsync(_ApiMobileNavOpen.Create(Model))
 						@await RenderBodyAsync()
 					</article>
 				</main>
diff --git a/src/Elastic.ApiExplorer/_Partials/Layout/_ApiMobileNavOpen.cshtml b/src/Elastic.ApiExplorer/_Partials/Layout/_ApiMobileNavOpen.cshtml
new file mode 100644
index 000000000..bb4ebbb18
--- /dev/null
+++ b/src/Elastic.ApiExplorer/_Partials/Layout/_ApiMobileNavOpen.cshtml
@@ -0,0 +1,9 @@
+@inherits RazorSlice<Elastic.ApiExplorer.Infrastructure.ApiLayoutViewModel>
+@* ReSharper disable once Html.IdNotResolved *@
+<label role="button" class="md:hidden cursor-pointer mt-3" for="pages-nav-hamburger">
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+		stroke="currentColor" class="size-6">
+		<path stroke-linecap="round" stroke-linejoin="round"
+			d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
+	</svg>
+</label>
diff --git a/tests/Elastic.ApiExplorer.Tests/ApiMobileNavOpenRenderingTests.cs b/tests/Elastic.ApiExplorer.Tests/ApiMobileNavOpenRenderingTests.cs
new file mode 100644
index 000000000..b9e8bfaec
--- /dev/null
+++ b/tests/Elastic.ApiExplorer.Tests/ApiMobileNavOpenRenderingTests.cs
@@ -0,0 +1,77 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using System.IO.Abstractions;
+using AwesomeAssertions;
+using Elastic.ApiExplorer._Partials.Layout;
+using Elastic.ApiExplorer.Infrastructure;
+using Elastic.ApiExplorer.Landing;
+using Elastic.Documentation;
+using Elastic.Documentation.Configuration;
+using Elastic.Documentation.Configuration.Assembler;
+using Elastic.Documentation.Configuration.Builder;
+using Elastic.Documentation.Diagnostics;
+using Elastic.Documentation.FileSystems;
+using Elastic.Documentation.Site.FileProviders;
+using RazorSlices;
+
+namespace Elastic.ApiExplorer.Tests;
+
+public class ApiMobileNavOpenRenderingTests
+{
+	[Fact]
+	public async Task Render_FlagOff_IncludesOpenLabel()
+	{
+		var html = await Render(new FeatureFlags([]));
+
+		AssertOpenLabel(html);
+	}
+
+	[Fact]
+	public async Task Render_FlagOn_IncludesOpenLabel()
+	{
+		var html = await Render(new FeatureFlags(new Dictionary<string, bool> { ["navigation-preview"] = true }));
+
+		AssertOpenLabel(html);
+	}
+
+	private static void AssertOpenLabel(string html)
+	{
+		html.Should().Contain("for=\"pages-nav-hamburger\"");
+		html.Should().Contain("role=\"button\"");
+		html.Should().Contain("md:hidden");
+	}
+
+	private static async Task<string> Render(FeatureFlags features)
+	{
+		var fs = new FileSystem();
+		var context = new BuildContext(
+			new DiagnosticsCollector([]),
+			DocumentationFileSystem.Resolve(Paths.WorkingDirectoryRoot.FullName),
+			TestHelpers.CreateConfigurationContext(fs)
+		);
+		var navigationItem = new LandingNavigationItem("/api/doc/elasticsearch/v9/").Index;
+		var model = new ApiLayoutViewModel
+		{
+			DocsBuilderVersion = "test",
+			DocSetName = "Api Explorer",
+			Description = string.Empty,
+			CurrentNavigationItem = navigationItem,
+			Previous = null,
+			Next = null,
+			NavigationHtml = string.Empty,
+			UrlPathPrefix = string.Empty,
+			AllowIndexing = false,
+			CanonicalBaseUrl = null,
+			GoogleTagManager = new GoogleTagManagerConfiguration(),
+			Optimizely = new OptimizelyConfiguration(),
+			Features = features,
+			StaticFileContentHashProvider = new StaticFileContentHashProvider(new EmbeddedOrPhysicalFileProvider(context)),
+			TocItems = [],
+			MarkdownUrl = "/api/doc/elasticsearch/v9.md",
+		};
+
+		return await _ApiMobileNavOpen.Create(model).RenderAsync(cancellationToken: TestContext.Current.CancellationToken);
+	}
+}