From d3b235e1f44ccbb710fb6cd17aee7c57073ec83b Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Wed, 9 Apr 2025 10:25:02 +0200
Subject: [PATCH 1/4] Left pages nav design changes

---
 .../Slices/Layout/_TocTree.cshtml             |  2 +-
 .../Slices/Layout/_TocTreeNav.cshtml          | 31 +++++++++----------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 0442e4ceb..04f632e42 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -58,7 +58,7 @@
 		</a>
 	}
 	
-	<ul class="block pl-4">
+	<ul class="block px-4">
 		@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 		{
 			IsPrimaryNavEnabled = Model.IsPrimaryNavEnabled,
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
index 634365693..515653165 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
@@ -10,7 +10,7 @@
 	if (item is FileNavigationItem file && Model.SubTree.IndexFileName != file.File.FileName)
 	{
 		var f = file.File;
-		<li class="flex group/li pr-4 @(isTopLevel ? "font-semibold py-8 pr-4 not-last:border-b-1 border-grey-20" : "ml-5 lg:ml-4 mt-4 lg:mt-3")">
+		<li class="flex group/li pr-4 @(isTopLevel ? "font-semibold mt-6" : "mt-4")">
 			<a
 				href="@f.Url"
 				@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && f.NavigationRoot.Id == Model.RootNavigationId || true)
@@ -24,7 +24,7 @@
 	else if (item is GroupNavigationItem { Group: { NavigationItems.Count: 0, Index: not null } } group)
 	{
 		var f = group.Group.Index;
-		<li class="flex group/li pr-4 @(isTopLevel ? "font-semibold py-8 pr-4 not-last:border-b-1 border-grey-20" : "ml-5 lg:ml-4 mt-4 lg:mt-3")">
+		<li class="flex group/li pr-4 @(isTopLevel ? "font-semibold mt-6 pr-4" : "ml-4")">
 			<a
 				href="@f.Url"
 				@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && f.NavigationRoot.Id == Model.RootNavigationId || true)
@@ -38,36 +38,35 @@
 	else if (item is GroupNavigationItem folder)
 	{
 		var g = folder.Group;
-		<li class="flex flex-wrap group-navigation @(isTopLevel ? "py-8 not-last:border-b-1 border-grey-20 pr-4" : "mt-4 lg:mt-3")">
-			<div class="peer grid gap-1 @(isTopLevel ? "grid-cols-[1fr_auto] w-full" : "grid-cols-[auto_1fr]")">
-				<label for="@id" class="group/label flex pt-0.5 @(isTopLevel ? "order-1 items-center mr-3" : "order-0 items-start")">
+		<li class="flex flex-wrap group-navigation @(isTopLevel ? "mt-6" : "mt-4")">
+			<div class="peer grid grid-cols-[1fr_auto] w-full">
+				<a
+					href="@(g.Index?.Url ?? "")"
+					@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && g.NavigationRootId == Model.RootNavigationId || true)
+					id="page-@(g.Index?.Id ?? id)"
+					class="sidebar-link pr-2 @(isTopLevel ? "font-semibold" : "")">
+					@(g.Index?.NavigationTitle ?? (g as TableOfContentsTree)?.Source.ToString() ?? "Untitled")
+				</a>
+				<label for="@id" class="group/label flex pt-0.5  mr-3 items-start">
 					<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 cursor-pointer @(isTopLevel ? "w-4" : "w-3")">
+						class="shrink-0 -rotate-90 group-has-checked/label:rotate-0 cursor-pointer w-3.5">
 						<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
 					</svg>
 					<input
 						id="@id"
 						type="checkbox"
 						class="hidden"
-						aria-hidden="true"
-					>
+						aria-hidden="true">
 				</label>
-				<a
-					href="@(g.Index?.Url ?? "")"
-					@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && g.NavigationRootId == Model.RootNavigationId || true)
-					id="page-@(g.Index?.Id ?? id)"
-					class="sidebar-link @(isTopLevel ? "font-semibold font-sans text-base" : "") @(isTopLevel ? "order-0" : "order-1")">
-					@(g.Index?.NavigationTitle ?? (g as TableOfContentsTree)?.Source.ToString() ?? "Untitled")
-				</a>
 			</div>
 			@if (g.NavigationItems.Count > 0)
 			{
-				<ul class="w-full hidden peer-has-checked:block @(Model.Level > 0 ? "ml-4": "")">
+				<ul class="w-full hidden peer-has-checked:block ml-4">
 					@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 					{
 						IsPrimaryNavEnabled = Model.IsPrimaryNavEnabled,

From e7c041c3baf4839b4fda8fdf018a1a858f85b2bd Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Wed, 9 Apr 2025 10:39:00 +0200
Subject: [PATCH 2/4] Add hover styling for caret

---
 .../Slices/Layout/_TocTreeNav.cshtml          | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
index 515653165..5353f22c5 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
@@ -44,19 +44,21 @@
 					href="@(g.Index?.Url ?? "")"
 					@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && g.NavigationRootId == Model.RootNavigationId || true)
 					id="page-@(g.Index?.Id ?? id)"
-					class="sidebar-link pr-2 @(isTopLevel ? "font-semibold" : "")">
+					class="sidebar-link pr-2 content-center @(isTopLevel ? "font-semibold" : "")">
 					@(g.Index?.NavigationTitle ?? (g as TableOfContentsTree)?.Source.ToString() ?? "Untitled")
 				</a>
-				<label for="@id" class="group/label flex pt-0.5  mr-3 items-start">
-					<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 cursor-pointer w-3.5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
-					</svg>
+				<label for="@id" class="group/label flex mr-2 items-start">
+					<div class="hover:bg-grey-20 rounded-sm p-1">
+						<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 cursor-pointer 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="@id"
 						type="checkbox"

From f0611b9c0b7eabcdeee5a96fe24d677c21ba6119 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Wed, 9 Apr 2025 10:42:02 +0200
Subject: [PATCH 3/4] Fix padding

---
 src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
index 5353f22c5..c267efe9f 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
@@ -10,7 +10,7 @@
 	if (item is FileNavigationItem file && Model.SubTree.IndexFileName != file.File.FileName)
 	{
 		var f = file.File;
-		<li class="flex group/li pr-4 @(isTopLevel ? "font-semibold mt-6" : "mt-4")">
+		<li class="flex group/li pr-8 @(isTopLevel ? "font-semibold mt-6" : "mt-4")">
 			<a
 				href="@f.Url"
 				@Htmx.GetNavHxAttributes(Model.IsPrimaryNavEnabled && f.NavigationRoot.Id == Model.RootNavigationId || true)

From 96ad42f316517c47f46535ab28017220261a95ab Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Wed, 9 Apr 2025 10:46:17 +0200
Subject: [PATCH 4/4] Move cursor styling to wrapper

---
 src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
index c267efe9f..3fad0ba23 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
@@ -48,14 +48,14 @@
 					@(g.Index?.NavigationTitle ?? (g as TableOfContentsTree)?.Source.ToString() ?? "Untitled")
 				</a>
 				<label for="@id" class="group/label flex mr-2 items-start">
-					<div class="hover:bg-grey-20 rounded-sm p-1">
+					<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 cursor-pointer w-3.5">
+							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>