julien.rbrt.fr
forked from
tangled.org/core
Monorepo for Tangled — https://tangled.org
docs: switch from details to popover api for sidebar
should work on older browsers too.
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+33
-7
+32
-7
docs/template.html
+32
-7
docs/template.html
···
43
43
$endfor$
44
44
45
45
$if(toc)$
46
-
<!-- mobile topbar toc -->
47
-
<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">
48
-
<summary class="cursor-pointer list-none text-sm font-semibold select-none flex gap-2 justify-between items-center dark:text-white">
46
+
<!-- mobile TOC trigger -->
47
+
<div class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
48
+
<button
49
+
type="button"
50
+
popovertarget="mobile-toc-popover"
51
+
popovertargetaction="toggle"
52
+
class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white"
53
+
>
54
+
${ menu.svg() }
55
+
$if(toc-title)$$toc-title$$else$Table of Contents$endif$
56
+
</button>
57
+
</div>
58
+
59
+
<div
60
+
id="mobile-toc-popover"
61
+
popover
62
+
class="mobile-toc-popover
63
+
bg-white dark:bg-gray-800
64
+
border-b border-gray-200 dark:border-gray-700
65
+
h-full overflow-y-auto
66
+
px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
67
+
>
68
+
<button
69
+
type="button"
70
+
popovertarget="mobile-toc-popover"
71
+
popovertargetaction="toggle"
72
+
class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white mb-4">
73
+
${ x.svg() }
49
74
$if(toc-title)$$toc-title$$else$Table of Contents$endif$
50
-
<span class="group-open:hidden inline">${ menu.svg() }</span>
51
-
<span class="hidden group-open:inline">${ x.svg() }</span>
52
-
</summary>
75
+
</button>
53
76
${ table-of-contents:toc.html() }
54
-
</details>
77
+
</div>
78
+
79
+
55
80
<!-- desktop sidebar toc -->
56
81
<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">
57
82
$if(toc-title)$