Prevent dropdown to open when click on active anchor (#1072)

* Make sure dropdown is closed on click

* Prevent dropdown to open when clicking active element

* Prettier

Author: reakaleek

src/Elastic.Markdown/Assets/pages-nav.ts

@@ -47,6 +47,15 @@ export function initNav() {
     if (!pagesNav) {
         return
     }
+
+    const pagesDropdown = $('#pages-dropdown')
+    if (pagesDropdown) {
+        const activeAnchor = $('a.pages-dropdown_active', pagesDropdown)
+        activeAnchor?.addEventListener('mousedown', (e) => {
+            e.preventDefault()
+        })
+    }
+
     const allNavItems = $$('a', pagesNav)
     allNavItems.forEach((link) => {
         link.addEventListener('click', () => {

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

@@ -7,16 +7,16 @@
 	@if (Model.IsPrimaryNavEnabled && current is { Group.Index: not null })
 	{
 		<div class="sticky top-0 py-6 bg-white z-10 border-b-1 border-grey-20 pr-4">
-			<div class="block group border-1 border-grey-20 rounded-sm font-sans relative">
+			<div id="pages-dropdown" class="block group border-1 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">
-					<span>
+					<div>
 						<a
-							class="hover:underline text-blue-elastic hover:text-blue-elastic-100"
+							class="pages-dropdown_active hover:underline text-blue-elastic hover:text-blue-elastic-100"
 							href="@current.Group.Index?.Url"
 							@Htmx.GetNavHxAttributes(true)>
 							@current.Group.Index?.NavigationTitle
 						</a>
-					</span>
+					</div>
 					<div class="flex items-center justify-center size-6 hover:bg-grey-20 rounded-sm">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"