Enhance

Author: reakaleek

src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml

@@ -9,13 +9,15 @@
 		{
 			var f = file.File;
 			var isCurrent = f == Model.CurrentDocument;
-			<li class="block ml-2 pl-2 w-full border-l-1 group @(isCurrent ? "current border-l-gray-200" : "border-l-gray-200")">
+			<li class="block ml-2 pl-2 w-full border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
 				<div class="flex">
 					<div class="w-5">
 					</div>
 					<a
-						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] group-[.current]:text-blue-elastic! hover:text-ink-dark"
-						href="@f.Url">
+						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] group-[.current]/li:text-blue-elastic! hover:text-ink-dark @(isCurrent ? "pointer-events-none" : string.Empty)"
+						href="@f.Url"
+						@(isCurrent ? "aria-current=page" : string.Empty)
+					>
 						@f.NavigationTitle
 					</a>
 				</div>
@@ -30,14 +32,14 @@
 			var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
 			var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
 			<li class="flex flex-wrap ml-2 pl-2 @(g.Depth > 1 ? "border-l-1 border-l-gray-200" : string.Empty)">
-				<label for="@slug" class="peer group flex items-center mr-1">
+				<label for="@slug" class="peer group/label flex items-center mr-1">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-						class="w-4 shrink -rotate-90 group-has-checked:rotate-0 cursor-pointer">
+						class="w-4 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer">
 						<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
 					</svg>
 					<input
@@ -46,13 +48,14 @@
 						class="hidden"
 						aria-hidden="true"
 						data-should-expand="@containsCurrent.ToLowerString()"
-						@(shouldInitiallyExpand ? "checked" : string.Empty)>
+						@(shouldInitiallyExpand ? "checked" : string.Empty)
+					>
+					<a
+						href="@g.Index?.Url"
+						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-ink-dark @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current pointer-events-none text-blue-elastic!" : string.Empty)">
+						@g.Index?.NavigationTitle
+					</a>
 				</label>
-				<a
-					href="@g.Index?.Url"
-					class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-ink-dark @(containsCurrent && g.Depth == 1 ? "font-bold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty) ">
-					@g.Index?.NavigationTitle
-				</a>
 				@if (g.NavigationItems.Count > 0)
 				{
 					<ul class="h-0 grow overflow-hidden peer-has-checked:h-auto w-full overflow-hidden" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">