Simplify navigation and remove lazy loading (#2530)

* Simplify navigation and remove lazy loading

* Remove more related to lazy load nav

Author: reakaleek

config/assembler.yml

@@ -28,7 +28,6 @@ environments:
     google_tag_manager:
       enabled: false
     feature_flags:
-      LAZY_LOAD_NAVIGATION: true
       SEARCH_OR_ASK_AI: true
   dev:
     uri: http://localhost:4000

src/Elastic.ApiExplorer/ApiViewModel.cs

@@ -37,7 +37,6 @@ public GlobalLayoutViewModel CreateGlobalLayoutModel() =>
 			Previous = null,
 			Next = null,
 			NavigationHtml = NavigationHtml,
-			NavigationFileName = string.Empty,
 			UrlPathPrefix = BuildContext.UrlPathPrefix,
 			AllowIndexing = BuildContext.AllowIndexing,
 			CanonicalBaseUrl = BuildContext.CanonicalBaseUrl,

src/Elastic.ApiExplorer/OpenApiGenerator.cs

@@ -298,7 +298,7 @@ private async Task<IFileInfo> Render<T>(string prefix, INavigationItem current,
 		if (!outputFile.Directory!.Exists)
 			outputFile.Directory.Create();
 
-		var navigationRenderResult = await navigationRenderer.RenderNavigation(current.NavigationRoot, current, INavigationHtmlWriter.AllLevels, ctx);
+		var navigationRenderResult = await navigationRenderer.RenderNavigation(current.NavigationRoot, current, ctx);
 		renderContext = renderContext with
 		{
 			CurrentNavigation = current,

src/Elastic.Documentation.Configuration/Builder/FeatureFlags.cs

@@ -20,12 +20,6 @@ public bool PrimaryNavEnabled
 		set => _featureFlags["primary-nav"] = value;
 	}
 
-	public bool LazyLoadNavigation
-	{
-		get => IsEnabled("lazy-load-navigation");
-		set => _featureFlags["lazy-load-navigation"] = value;
-	}
-
 	public bool DisableGitHubEditLink
 	{
 		get => IsEnabled("disable-github-edit-link");

src/Elastic.Documentation.Site/Assets/main.ts

@@ -37,8 +37,6 @@ import('./web-components/AppliesToPopover')
 import('./web-components/FullPageSearch/FullPageSearchComponent')
 
 const { getOS } = new UAParser()
-const isLazyLoadNavigationEnabled =
-    $('meta[property="docs:feature:lazy-load-navigation"]')?.content === 'true'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type HtmxEvent = any
@@ -96,23 +94,14 @@ document.addEventListener('DOMContentLoaded', function () {
     initMath()
 })
 
-document.addEventListener('htmx:load', function (event: HtmxEvent) {
+document.addEventListener('htmx:load', function () {
     initTocNav()
     initHighlight()
     initCopyButton()
     initTabs()
     initAppliesSwitch()
     initMath()
-
-    // We do this so that the navigation is not initialized twice
-    // When lazy load is enabled, only initialize when nav-tree loads
-    // Defer with requestAnimationFrame to ensure DOM is fully rendered
-    // The throttle with trailing: true will ensure only the last call executes
-    if (!isLazyLoadNavigationEnabled || event.detail.elt.id === 'nav-tree') {
-        requestAnimationFrame(() => {
-            initNav()
-        })
-    }
+    initNav()
     initSmoothScroll()
     openDetailsWithAnchor()
     initImageCarousel()

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

@@ -55,20 +55,21 @@ export const scrollCurrentNaviItemIntoView = throttle(
     { leading: false, trailing: true }
 )
 
-function setDropdown(dropdown: HTMLElement) {
-    if (dropdown) {
-        const anchors = $$('a', dropdown)
-        anchors.forEach((a) => {
-            a.addEventListener('mousedown', (e) => {
-                e.preventDefault()
-            })
-            a.addEventListener('mouseup', () => {
-                if (document.activeElement instanceof HTMLElement) {
-                    document.activeElement.blur()
-                }
-            })
-        })
-    }
+/**
+ * Prevents focus-based dropdowns from closing before link navigation completes.
+ * Without this, clicking a link inside the dropdown would transfer focus away,
+ * causing the dropdown to close via CSS :focus-within before navigation happens.
+ */
+function preventFocusLossOnLinkClick(anchor: HTMLAnchorElement) {
+    anchor.addEventListener('mousedown', (e) => {
+        e.preventDefault()
+    })
+    // Close dropdown after click completes
+    anchor.addEventListener('mouseup', () => {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur()
+        }
+    })
 }
 
 export function initNav() {
@@ -77,13 +78,9 @@ export function initNav() {
         return
     }
 
-    const pagesDropdown = $('#pages-dropdown')
-    if (pagesDropdown) {
-        setDropdown(pagesDropdown)
-    }
-    const pageVersionDropdown = $('#page-version-dropdown')
-    if (pageVersionDropdown) {
-        setDropdown(pageVersionDropdown)
+    const dropdownActiveAnchor = $('#pages-dropdown a.pages-dropdown_active')
+    if (dropdownActiveAnchor) {
+        preventFocusLossOnLinkClick(dropdownActiveAnchor)
     }
 
     // Remove current class from all nav items before marking new ones

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

@@ -35,4 +35,3 @@
 	{
 		<meta property="og:url" content="@Model.CanonicalUrl" />
 	}
-	<meta property="docs:feature:lazy-load-navigation" content="@Model.Features.LazyLoadNavigation" />

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

@@ -1,10 +1,5 @@
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
 <aside class="sidebar font-sans bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-2 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
-	
-	@if (Model.Features.LazyLoadNavigation && !string.IsNullOrEmpty(Model.NavigationFileName))
-	{
-		<div class="hidden" hx-get="@(Model.Link(Model.NavigationFileName))" hx-trigger="load" hx-params="nav" hx-push-url="false" hx-swap="innerHTML" hx-target="#pages-nav"></div>
-	}
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full">

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

@@ -9,12 +9,9 @@ namespace Elastic.Documentation.Site.Navigation;
 
 public interface INavigationHtmlWriter
 {
-	const int AllLevels = -1;
-
 	Task<NavigationRenderResult> RenderNavigation(
 		IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation,
 		INavigationItem currentNavigationItem,
-		int maxLevel,
 		Cancel ctx = default
 	);
 

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

@@ -12,35 +12,35 @@ namespace Elastic.Documentation.Site.Navigation;
 public class IsolatedBuildNavigationHtmlWriter(BuildContext context, IRootNavigationItem<INavigationModel, INavigationItem> siteRoot)
 	: INavigationHtmlWriter
 {
-	private readonly ConcurrentDictionary<(string, int), string> _renderedNavigationCache = [];
+	private readonly ConcurrentDictionary<string, string> _renderedNavigationCache = [];
 
 	public async Task<NavigationRenderResult> RenderNavigation(
-		IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, INavigationItem currentNavigationItem, int maxLevel, Cancel ctx = default
+		IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, INavigationItem currentNavigationItem, Cancel ctx = default
 	)
 	{
 		var navigation = context.Configuration.Features.PrimaryNavEnabled || currentRootNavigation.IsUsingNavigationDropdown
 			? currentRootNavigation
 			: siteRoot;
-		var id = ShortId.Create($"{(navigation.Id, maxLevel).GetHashCode()}");
-		if (_renderedNavigationCache.TryGetValue((navigation.Id, maxLevel), out var value))
+		var id = ShortId.Create($"{navigation.Id.GetHashCode()}");
+		if (_renderedNavigationCache.TryGetValue(navigation.Id, out var value))
 		{
 			return new NavigationRenderResult
 			{
 				Html = value,
 				Id = id
 			};
 		}
-		var model = CreateNavigationModel(navigation, maxLevel);
+		var model = CreateNavigationModel(navigation);
 		value = await ((INavigationHtmlWriter)this).Render(model, ctx);
-		_renderedNavigationCache[(navigation.Id, maxLevel)] = value;
+		_renderedNavigationCache[navigation.Id] = value;
 		return new NavigationRenderResult
 		{
 			Html = value,
 			Id = id
 		};
 	}
 
-	private NavigationViewModel CreateNavigationModel(IRootNavigationItem<INavigationModel, INavigationItem> navigation, int maxLevel) =>
+	private NavigationViewModel CreateNavigationModel(IRootNavigationItem<INavigationModel, INavigationItem> navigation) =>
 		new()
 		{
 			Title = navigation.NavigationTitle,
@@ -49,7 +49,6 @@ private NavigationViewModel CreateNavigationModel(IRootNavigationItem<INavigatio
 			IsPrimaryNavEnabled = context.Configuration.Features.PrimaryNavEnabled,
 			IsUsingNavigationDropdown = context.Configuration.Features.PrimaryNavEnabled || navigation.IsUsingNavigationDropdown,
 			IsGlobalAssemblyBuild = false,
-			TopLevelItems = siteRoot.NavigationItems.OfType<INodeNavigationItem<INavigationModel, INavigationItem>>().ToList(),
-			MaxLevel = maxLevel
+			TopLevelItems = siteRoot.NavigationItems.OfType<INodeNavigationItem<INavigationModel, INavigationItem>>().ToList()
 		};
 }