From fb7071ad05e7a5d5467dcd79382a361a917c50d7 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 5 Jan 2026 05:34:24 +0000
Subject: [PATCH] docs: switch from details to popover api for sidebar

should work on older browsers too.

Signed-off-by: oppiliappan <me@oppi.li>
---
 docs/template.html | 39 ++++++++++++++++++++++++++++++++-------
 input.css          |  1 +
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/docs/template.html b/docs/template.html
index 86f635c0..3a33327b 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -43,15 +43,40 @@
     $endfor$
 
     $if(toc)$
-      <!-- mobile topbar toc -->
-      <details id="mobile-$idprefix$TOC" role="doc-toc" class="md:hidden bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 z-50 space-y-4 group px-6 py-4">
-        <summary class="cursor-pointer list-none text-sm font-semibold select-none flex gap-2 justify-between items-center dark:text-white">
+      <!-- mobile TOC trigger -->
+      <div class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <button
+          type="button"
+          popovertarget="mobile-toc-popover"
+          popovertargetaction="toggle"
+          class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white"
+        >
+          ${ menu.svg() }
           $if(toc-title)$$toc-title$$else$Table of Contents$endif$
-          <span class="group-open:hidden inline">${ menu.svg() }</span>
-          <span class="hidden group-open:inline">${ x.svg() }</span>
-        </summary>
+        </button>
+      </div>
+
+      <div
+        id="mobile-toc-popover"
+        popover
+        class="mobile-toc-popover
+               bg-white dark:bg-gray-800
+               border-b border-gray-200 dark:border-gray-700
+               h-full overflow-y-auto
+               px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
+      >
+        <button
+          type="button"
+          popovertarget="mobile-toc-popover"
+          popovertargetaction="toggle"
+          class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white mb-4">
+          ${ x.svg() }
+          $if(toc-title)$$toc-title$$else$Table of Contents$endif$
+        </button>
         ${ table-of-contents:toc.html() }
-      </details>
+      </div>
+
+
       <!-- desktop sidebar toc -->
       <nav id="$idprefix$TOC" role="doc-toc" class="hidden md:block fixed left-0 top-0 w-80 h-screen bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto p-4 z-50">
         $if(toc-title)$
diff --git a/input.css b/input.css
index 566193c9..f079c59d 100644
--- a/input.css
+++ b/input.css
@@ -255,6 +255,7 @@
             @apply py-1 text-gray-900 dark:text-gray-100;
         }
     }
+
 }
 
 /* Background */
-- 
2.51.2