Fix dropdown on safari (#1087)

* Fix dropdown on safari

* Make sure dropdown is closed in safari

* Remove tabindex where not needed

Author: reakaleek

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

@@ -50,19 +50,19 @@ export function initNav() {
 
     const pagesDropdown = $('#pages-dropdown')
     if (pagesDropdown) {
-        const activeAnchor = $('a.pages-dropdown_active', pagesDropdown)
-        activeAnchor?.addEventListener('mousedown', (e) => {
-            e.preventDefault()
+        const anchors = $$('a', pagesDropdown)
+        anchors.forEach((a) => {
+            a.addEventListener('mousedown', (e) => {
+                e.preventDefault()
+            })
+            a.addEventListener('mouseup', () => {
+                if (document.activeElement instanceof HTMLElement) {
+                    document.activeElement.blur()
+                }
+            })
         })
     }
 
-    const allNavItems = $$('a', pagesNav)
-    allNavItems.forEach((link) => {
-        link.addEventListener('click', () => {
-            link.closest('details').removeAttribute('open')
-        })
-    })
-
     const navItems = $$(
         'a[href="' +
             window.location.pathname +

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 id="pages-dropdown" class="block group border-1 border-grey-20 rounded-sm font-sans relative">
+			<div tabindex="0" 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">
 					<div>
 						<a