fix(nav-v2): compact left-aligned top bar, section root highlight, auto-expand

- Wrap all V2 content in a single "Docs" section; add Release notes,
  Troubleshoot, Reference as separate section tabs
- Secondary nav: left-aligned, 55px height, restored md:text-base font
- Skip current-page highlighting on section root pages via
  data-section-url attribute (includes site prefix)
- Auto-expand top-level folders on section root pages so content is
  visible without a specific page being marked current

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: theletterf

src/Elastic.Documentation.Site/Assets/pages-nav-v2.ts

@@ -51,6 +51,23 @@ function normalizeDocPathname(pathname: string) {
     return p === '' ? '/' : p
 }
 
+/**
+ * Returns true when the current page is the section root URL.
+ * Section root pages should not get current-page highlighting in the sidebar
+ * because the section URL is a tab target, not a page within the nav tree.
+ */
+function isOnSectionRootPage(nav: HTMLElement): boolean {
+    const sectionUrl = nav.dataset.sectionUrl
+    if (!sectionUrl) {
+        return false
+    }
+
+    return (
+        normalizeDocPathname(window.location.pathname) ===
+        normalizeDocPathname(sectionUrl)
+    )
+}
+
 /** Matches {@link markCurrentPage} / {@link expandToCurrentPage} href selectors (not root-normalized). */
 function stripTrailingSlashForNavHref(pathname: string) {
     return pathname.replace(/\/$/, '')
@@ -318,6 +335,9 @@ function deepestCurrentSidebarLink(nav: HTMLElement): HTMLAnchorElement | null {
  */
 function applyActiveSubtreeHighlight(nav: HTMLElement) {
     clearActiveSubtreeHighlight(nav)
+    if (isOnSectionRootPage(nav)) {
+        return
+    }
     const current = deepestCurrentSidebarLink(nav)
     if (!current || !nav.contains(current)) {
         return
@@ -377,8 +397,13 @@ function markCurrentPageForPath(nav: HTMLElement, pathnameRaw: string) {
 
 /**
  * Mark the current page's nav link with the "current" CSS class.
+ * Skips marking when the current page is the section root URL.
  */
 function markCurrentPage(nav: HTMLElement) {
+    if (isOnSectionRootPage(nav)) {
+        $$('.current', nav).forEach((el) => el.classList.remove('current'))
+        return
+    }
     markCurrentPageForPath(nav, window.location.pathname)
 }
 
@@ -461,6 +486,16 @@ function expandToCurrentPageForPath(nav: HTMLElement, pathnameRaw: string) {
  * is the current page (see session storage + folder row link match).
  */
 function expandToCurrentPage(nav: HTMLElement) {
+    if (isOnSectionRootPage(nav)) {
+        // On the section root page, expand all top-level folders so the
+        // section content is visible even though no specific page is current.
+        nav.querySelectorAll<HTMLInputElement>(
+            '#nav-tree > li > .peer > input[type="checkbox"]'
+        ).forEach((cb) => {
+            cb.checked = true
+        })
+        return
+    }
     expandToCurrentPageForPath(nav, window.location.pathname)
 }
 

src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml

@@ -4,10 +4,10 @@
 	<ask-ai></ask-ai>
 	<nav id="secondary-nav" hx-select-oob="#main-container" hx-swap="none"
 	     class="bg-grey-10 border-b border-grey-20">
-		<div class="w-full max-w-(--max-layout-width) mx-auto px-4 py-2">
+		<div class="w-full max-w-(--max-layout-width) mx-auto px-4 h-[55px] flex items-center">
 			@if (Model.NavV2Sections is { Count: > 0 } navTabs)
 			{
-				<ul class="flex gap-5 font-sans font-semibold text-sm text-ink-light">
+				<ul class="flex gap-6 font-sans font-semibold text-sm text-ink-light md:text-base">
 				@foreach (var navTab in navTabs.Where(s => !s.Isolated))
 				{
 					var isActive = navTab.Id == Model.ActiveSectionId;
@@ -27,7 +27,7 @@
 			}
 			else
 			{
-				<ul class="flex gap-5 font-sans font-semibold text-sm text-ink-light">
+				<ul class="flex gap-6 font-sans font-semibold text-sm text-ink-light md:text-base">
 					<li class="text-nowrap text-blue-elastic">
 						<a href="@Model.Link("/")">Docs</a>
 					</li>

src/Elastic.Documentation.Site/Navigation/NavigationViewModel.cs

@@ -29,4 +29,7 @@ public class NavigationViewModel
 
 	/// <summary>When true, the sidebar renders a back arrow instead of appearing in the top bar.</summary>
 	public bool IsIsolatedSection { get; init; }
+
+	/// <summary>The section's own URL, used by JS to skip current-page highlighting on the section root.</summary>
+	public string? SectionUrl { get; init; }
 }

src/Elastic.Documentation.Site/Navigation/_TocTree.cshtml

@@ -83,7 +83,7 @@
 			</a>
 		}
 		@* Root for V2-only CSS; JS still uses [data-nav-v2]. Scope overrides: .docs-sidebar-nav-v2 … *@
-		<nav class="docs-sidebar-nav-v2" data-nav-v2>
+		<nav class="docs-sidebar-nav-v2" data-nav-v2 @if (Model.SectionUrl is not null) { <text>data-section-url="@Model.SectionUrl"</text> }>
 			<ul class="docs-sidebar-nav-v2__tree block" id="nav-tree">
 				@await RenderPartialAsync(_TocTreeNavV2.Create(new NavigationTreeItem
 				{

src/services/Elastic.Documentation.Assembler/Navigation/GlobalNavigationHtmlWriter.cs

@@ -105,7 +105,8 @@ Cancel ctx
 				Htmx = new DefaultHtmxAttributeProvider("/"),
 				BuildType = BuildType.Assembler,
 				IsNavV2 = true,
-				IsIsolatedSection = section.Isolated
+				IsIsolatedSection = section.Isolated,
+				SectionUrl = CombineWithSitePrefix(navV2, section.Url)
 			};
 
 			var html = await ((INavigationHtmlWriter)this).Render(model, ctx);
@@ -118,6 +119,13 @@ Cancel ctx
 		}
 	}
 
+	private static string CombineWithSitePrefix(SiteNavigation nav, string sectionUrl)
+	{
+		var prefix = nav.Url.TrimEnd('/');
+		var path = sectionUrl.TrimStart('/');
+		return string.IsNullOrEmpty(path) ? $"{prefix}/" : $"{prefix}/{path}";
+	}
+
 	private static NavigationRenderResult CreateSectionResult(string html, NavigationSection activeSection, SiteNavigationV2 navV2) =>
 		new()
 		{