docs-builder/src/Elastic.Documentation.Site/Navigation/_TocTree.cshtml at 33282063f02ead236482667c7087ec0b3541b86d · elastic/docs-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@using Elastic.Documentation
@using Elastic.Documentation.Site.Navigation
@inherits RazorSlice<Elastic.Documentation.Site.Navigation.NavigationViewModel>

<div class="pb-9 pl-3 md:pl-0 font-body">
	@{
		var currentTopLevelItem = Model.TopLevelItems.FirstOrDefault(i => i.Id == Model.Tree.Id) ?? Model.Tree;
	}
	<div class="sticky top-0 z-10 bg-white">
		@if (Model.BuildType != BuildType.Codex && Model.Branding is null)
		{
			<navigation-search></navigation-search>
		}
		<div id="nav-dropdown">
		@if (Model.IsUsingNavigationDropdown)
			{
				<div class="py-4 bg-white border-grey-20 pr-4">
					<div tabindex="0" id="pages-dropdown" class="block group border border-grey-20 rounded-sm font-sans relative">
						<button class="w-full text-left grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-2 py-2 group-open:border-b-1 border-grey-20">
							<div>
								<a
									class="pages-dropdown_active hover:underline text-blue-elastic hover:text-blue-elastic-100"
									href="@currentTopLevelItem.Url"
									@Model.Htmx.GetNavHxAttributes(true)>
									@currentTopLevelItem.NavigationTitle
								</a>
							</div>
							<div class="flex items-center justify-center size-6 hover:bg-grey-20 rounded-sm">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
									stroke-width="1.5"
									stroke="currentColor"
									class="w-4 group-open:rotate-180">
									<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
								</svg>
							</div>
						</button>
					<div class="hidden group-focus-within:block left-0 right-0 absolute top-full">
						<ul class="mt-1 py-2 bg-white border-1 border-grey-20 rounded-sm shadow-md"
						@Model.Htmx.GetNavHxAttributes(false, "mouseover")>
				@foreach (var item in Model.TopLevelItems)
				{
								<li class="block">
									<a
										class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.NavigationRoot.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
										href="@item.Url">
							@item.NavigationTitle
						</a>
					</li>
				}
				</ul>
					</div>
				</div>
			</div>
		}
		else
		{
			@* index page surfaces as the first nav item via _TocTreeNav *@
		}
		</div>
	</div>

	<ul class="block px-4" id="nav-tree" @Model.Htmx.GetNavHxAttributes(true)>
		@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
		{
			IsPrimaryNavEnabled = Model.IsPrimaryNavEnabled,
			IsGlobalAssemblyBuild = Model.IsGlobalAssemblyBuild,
			Level = 0,
			SubTree = Model.Tree,
			RootNavigationId = Model.Tree.Id,
			Htmx = Model.Htmx
		}))
	</ul>
</div>