Fix pages navigation (#528)

Author: reakaleek

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

@@ -10,7 +10,7 @@
 		<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
 			<div class="flex">
 				<a
-					class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
+					class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "pointer-events-none" : string.Empty)"
 					href="@f.Url"
 					@(isCurrent ? "aria-current=page" : string.Empty)>
 					@f.NavigationTitle
@@ -22,12 +22,12 @@
 	{
 		var g = folder.Group;
 		var isCurrent = g.Index == Model.CurrentDocument;
-		var slug = g.Index?.Title.Slugify();
 		const int initialExpandLevel = 1;
 		var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
 		var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
+		var uuid = Guid.NewGuid().ToString();
 		<li class="flex flex-wrap @(g.Depth > 1 ? "ml-2 pl-2 border-l-1 border-l-gray-200" : string.Empty)">
-			<label for="@slug" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
+			<label for="@uuid" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
@@ -38,7 +38,7 @@
 					<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
 				</svg>
 				<input
-					id="@slug"
+					id="@uuid"
 					type="checkbox"
 					class="hidden"
 					aria-hidden="true"
@@ -47,7 +47,7 @@
 				>
 				<a
 					href="@g.Index?.Url"
-					class="sidebar-link inline-block my-1 @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty)">
+					class="sidebar-link inline-block my-1 @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current pointer-events-none text-blue-elastic!" : string.Empty)">
 					@g.Index?.NavigationTitle
 				</a>
 			</label>