From f0efad8ae44074cf6a52a047c6a8f21d0c05dda3 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Wed, 9 Apr 2025 16:00:58 +0200
Subject: [PATCH] Display dropdown content in an overlay

---
 .../Slices/Layout/_PagesNav.cshtml            |  2 +-
 .../Slices/Layout/_TocTree.cshtml             | 45 ++++++++++---------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index fbd51dab6..e864e9cab 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -2,7 +2,7 @@
 <aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)]  order-1 w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 	<nav
 		id="pages-nav"
-		class="sidebar-nav"
+		class="sidebar-nav h-full"
 		@* used to invalidate session storage *@
 		data-current-navigation="@LayoutViewModel.CurrentNavigationId">
 		@(new HtmlString(Model.NavigationHtml))
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 04f632e42..d437c5978 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -7,14 +7,13 @@
 	@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">
-			<details class="block group border-1 border-grey-20 rounded-sm font-sans">
-				<summary class="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 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 
+						<a
 							class="hover:underline text-blue-elastic hover:text-blue-elastic-100"
 							href="@current.Group.Index?.Url"
-							@Htmx.GetNavHxAttributes(true)
-						>
+							@Htmx.GetNavHxAttributes(true)>
 							@current.Group.Index?.NavigationTitle
 						</a>
 					</span>
@@ -29,23 +28,25 @@
 							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
 						</svg>
 					</div>
-				</summary>
-				<ul class="py-2">
-					@foreach (var item in Model.TopLevelItems)
-					{
-						if (item.Group.Index == null) continue;
-						if (item.Id == current?.Id) continue;
-						<li class="block">
-							<a
-								class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
-								href="@item.Group.Index.Url"
-								@Htmx.GetNavHxAttributes(false, "mouseover")>
-								@item.Group.Index.NavigationTitle
-							</a>
-						</li>
-					}
-				</ul>
-			</details>
+				</button>
+				<div class="hidden group-focus-within:block left-0 right-0 absolute top-full">
+					<ul class="mt-1 py-2 bg-white border-1 border-grey-20 rounded-sm shadow-md">
+						@foreach (var item in Model.TopLevelItems)
+						{
+							if (item.Group.Index == null) continue;
+							if (item.Id == current?.Id) continue;
+							<li class="block">
+								<a
+									class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
+									href="@item.Group.Index.Url"
+									@Htmx.GetNavHxAttributes(false, "mouseover")>
+									@item.Group.Index.NavigationTitle
+								</a>
+							</li>
+						}
+					</ul>
+				</div>
+			</div>
 		</div>
 	}
 	else