_TocTreeNav.cshtml

@using Elastic.Documentation.Navigation
@using Elastic.Documentation.Navigation.Isolated
@using Elastic.Documentation.Navigation.Isolated.Leaf
@using Elastic.Documentation.Site.Navigation
@inherits RazorSlice<NavigationTreeItem>
@{
	var isTopLevel = Model.Level == 0;
}
@functions {
	static (string? badge, string label) ParseNavTitle(string raw)
	{
		if (raw.StartsWith("[ns]", StringComparison.Ordinal)) return ("ns", raw[4..]);
		if (raw.StartsWith("[cmd]", StringComparison.Ordinal)) return ("cmd", raw[5..]);
		if (raw.StartsWith("[alias]", StringComparison.Ordinal)) return ("alias", raw[7..]);
		return (null, raw);
	}

	// Inline styles to avoid Tailwind purge — very muted tints, subtle border for definition
	const string NsStyle    = "background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe;";
	const string CmdStyle   = "background:#fffbeb;color:#b45309;border:1px solid #fde68a;";
	const string AliasStyle = "background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;";

	static string BadgeStyle(string? badge) => badge switch { "ns" => NsStyle, "cmd" => CmdStyle, "alias" => AliasStyle, _ => "" };
}
@if (isTopLevel && !Model.IsGlobalAssemblyBuild && !Model.IsPrimaryNavEnabled && !Model.SubTree.Index.Hidden)
{
	var idx = Model.SubTree.Index;
	<li class="flex group/li pr-8 mt-6">
		<a
			href="@idx.Url"
			@Model.Htmx.GetNavHxAttributes(true)
			class="sidebar-link grow group-[.current]/li:text-blue-elastic!"
		>
			@idx.NavigationTitle
		</a>
	</li>
}
@foreach (var item in Model.SubTree.NavigationItems)
{
	if (item.Hidden)
	{
		continue;
	}

	if (item.Parent is not null && item.Parent.Index == item)
	{
		continue;
	}
	if (item is INodeNavigationItem<INavigationModel, INavigationItem> { NavigationItems.Count: 0 } group)
	{
		var (groupBadge, groupLabel) = ParseNavTitle(group.NavigationTitle);
		<li class="flex group/li pr-8 @(isTopLevel ? "font-semibold mt-6" : "mt-4")">
			<a
				href="@group.Url"
				@Model.Htmx.GetNavHxAttributes(true)
				class="sidebar-link group-[.current]/li:text-blue-elastic! flex items-center w-full"
			>
				<span>@groupLabel</span>
				@if (groupBadge == "ns") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@NsStyle">ns</span> }
				else if (groupBadge == "cmd") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@CmdStyle">cmd</span> }
				else if (groupBadge == "alias") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@AliasStyle">alias</span> }
			</a>
		</li>
	}
	else if (item is INodeNavigationItem<INavigationModel, INavigationItem> folder)
	{
		var g = folder;
		var allHidden = folder.NavigationItems.All(n => n.Hidden);
		var (folderBadge, folderLabel) = ParseNavTitle(g.NavigationTitle);
		<li class="flex flex-wrap group-navigation @(isTopLevel ? "mt-6" : "mt-4") relative">
			<div class="peer grid grid-cols-[1fr_auto] w-full">
				<a
					href="@(g.Url)"
					@Model.Htmx.GetNavHxAttributes(true)
					class="sidebar-link pr-2 content-center @(isTopLevel ? "font-semibold" : "") group-[.current]/li:text-blue-elastic! flex items-center gap-1">
					<span>@folderLabel</span>
					@if (folderBadge == "ns") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@NsStyle">ns</span> }
					else if (folderBadge == "cmd") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@CmdStyle">cmd</span> }
					else if (folderBadge == "alias") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@AliasStyle">alias</span> }
				</a>
				@if (!allHidden)
				{
					<label for="@folder.Id" class="group/label flex mr-2 items-start">
						<div class="hover:bg-grey-20 rounded-sm p-1 cursor-pointer">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="1.5"
								stroke="currentColor"
								class="shrink-0 -rotate-90 group-has-checked/label:rotate-0 w-3.5">
								<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
							</svg>
						</div>
						<input
							id="@folder.Id"
							type="checkbox"
							class="hidden"
							aria-hidden="true">
					</label>
				}
			</div>
			@if (g.NavigationItems.Count > 0)
			{
				<ul class="w-full hidden peer-has-checked:block ml-4 relative before:content-[''] before:absolute before:-left-[calc(var(--spacing)*4-1px)] before:top-0 before:bottom-0 before:w-px before:bg-grey-20 before:peer-has-checked:block peer-has-[.current]:before:bg-grey-40 has-[.current]:before:bg-grey-40">
					@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
					{
						IsPrimaryNavEnabled = Model.IsPrimaryNavEnabled,
						IsGlobalAssemblyBuild = Model.IsGlobalAssemblyBuild,
						Level = Model.Level + 1,
						SubTree = g,
						RootNavigationId = Model.RootNavigationId,
						Htmx = Model.Htmx
					}))
				</ul>
			}
		</li>
	}
	else if (item is ILeafNavigationItem<INavigationModel> leaf)
	{
		var hasSameTopLevelGroup = true;
		var (leafBadge, leafLabel) = ParseNavTitle(leaf.NavigationTitle);
		<li class="flex group/li pr-8 @(isTopLevel ? "font-semibold mt-6" : "mt-4")">
			<a
				href="@leaf.Url"
				@Model.Htmx.GetNavHxAttributes(hasSameTopLevelGroup)
				class="sidebar-link grow group-[.current]/li:text-blue-elastic! flex items-center w-full"
			>
				<span>@leafLabel</span>
				@if (leafBadge == "ns") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@NsStyle">ns</span> }
				else if (leafBadge == "cmd") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@CmdStyle">cmd</span> }
				else if (leafBadge == "alias") { <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold shrink-0" style="@AliasStyle">alias</span> }
			</a>
		</li>
	}
}