From 762c4fd72ce02925444239c195440ab4ea35b9cf Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 10:40:38 +0200
Subject: [PATCH 1/3] Make sure dropdown is closed on click

---
 src/Elastic.Markdown/Assets/pages-nav.ts           | 10 ++++++++++
 src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index 820dfa91c..13844ff5a 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -43,6 +43,16 @@ function isElementInViewport(parent: HTMLElement, child: HTMLElement): boolean {
 }
 
 export function initNav() {
+    const pagesDropdown = $('#pages-dropdown')
+    if (pagesDropdown) {
+        const anchors = $$('a', pagesDropdown)
+        anchors.forEach((a) => {
+            a.addEventListener('click', () => {
+                a.blur()
+            })
+        })
+    }
+
     const pagesNav = $('#pages-nav')
     if (!pagesNav) {
         return
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index d437c5978..6ee996fb4 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -7,7 +7,7 @@
 	@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>
 						<a

From e8a291ff8d99db962d97e7270b549d32b4737292 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 10:58:11 +0200
Subject: [PATCH 2/3] Prevent dropdown to open when clicking active element

---
 src/Elastic.Markdown/Assets/pages-nav.ts        | 17 +++++++----------
 .../Slices/Layout/_TocTree.cshtml               |  6 +++---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index 13844ff5a..3b8cc6d12 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -43,20 +43,17 @@ function isElementInViewport(parent: HTMLElement, child: HTMLElement): boolean {
 }
 
 export function initNav() {
-    const pagesDropdown = $('#pages-dropdown')
-    if (pagesDropdown) {
-        const anchors = $$('a', pagesDropdown)
-        anchors.forEach((a) => {
-            a.addEventListener('click', () => {
-                a.blur()
-            })
-        })
-    }
-
     const pagesNav = $('#pages-nav')
     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', () => {
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 6ee996fb4..4abedb749 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -9,14 +9,14 @@
 		<div class="sticky top-0 py-6 bg-white z-10 border-b-1 border-grey-20 pr-4">
 			<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"

From 9177ebc565bdea8d11d2d7e8193223b4efe20472 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 11:02:14 +0200
Subject: [PATCH 3/3] Prettier

---
 src/Elastic.Markdown/Assets/pages-nav.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index 3b8cc6d12..4fb63856c 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -47,13 +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()})
+        activeAnchor?.addEventListener('mousedown', (e) => {
+            e.preventDefault()
+        })
     }
-    
+
     const allNavItems = $$('a', pagesNav)
     allNavItems.forEach((link) => {
         link.addEventListener('click', () => {