Monorepo for Tangled 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 fb7071ad e9606689

verified
Changed files
+33 -7
docs
+32 -7
docs/template.html
··· 43 $endfor$ 44 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"> 49 $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> 53 ${ table-of-contents:toc.html() } 54 - </details> 55 <!-- desktop sidebar toc --> 56 <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 $if(toc-title)$
··· 43 $endfor$ 44 45 $if(toc)$ 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() } 74 $if(toc-title)$$toc-title$$else$Table of Contents$endif$ 75 + </button> 76 ${ table-of-contents:toc.html() } 77 + </div> 78 + 79 + 80 <!-- desktop sidebar toc --> 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"> 82 $if(toc-title)$
+1
input.css
··· 255 @apply py-1 text-gray-900 dark:text-gray-100; 256 } 257 } 258 } 259 260 /* Background */
··· 255 @apply py-1 text-gray-900 dark:text-gray-100; 256 } 257 } 258 + 259 } 260 261 /* Background */