lewis.moe
Monorepo for Tangled
docs: move mode toggle button to the bottom
Signed-off-by: oppiliappan <me@oppi.li>
+28
-18
docs/template.html
+28
-18
docs/template.html
···
61
61
popover
62
62
class="mobile-toc-popover
63
63
bg-white dark:bg-gray-800
64
-
border-b border-gray-200 dark:border-gray-700
64
+
border-r border-gray-200 dark:border-gray-700
65
65
h-full overflow-y-auto
66
66
px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
67
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
-
${ single-page:mode.html() }
68
+
<div class="flex flex-col min-h-full">
69
+
<div class="flex-1">
70
+
<button
71
+
type="button"
72
+
popovertarget="mobile-toc-popover"
73
+
popovertargetaction="toggle"
74
+
class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white mb-4">
75
+
${ x.svg() }
76
+
$if(toc-title)$$toc-title$$else$Table of Contents$endif$
77
+
</button>
78
+
${ table-of-contents:toc.html() }
79
+
</div>
80
+
${ single-page:mode.html() }
81
+
</div>
78
82
</div>
79
-
80
83
81
84
<!-- desktop sidebar toc -->
82
-
<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">
83
-
$if(toc-title)$
84
-
<h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2>
85
-
$endif$
86
-
${ table-of-contents:toc.html() }
85
+
<nav
86
+
id="$idprefix$TOC"
87
+
role="doc-toc"
88
+
class="hidden md:flex md:flex-col fixed left-0 top-0 w-80 h-screen
89
+
bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
90
+
p-4 z-50 overflow-y-auto">
91
+
<div class="flex-1">
92
+
$if(toc-title)$
93
+
<h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2>
94
+
$endif$
95
+
${ table-of-contents:toc.html() }
96
+
</div>
87
97
${ single-page:mode.html() }
88
98
</nav>
89
99
$endif$
···
118
128
$body$
119
129
</article>
120
130
</main>
121
-
<nav id="sitenav" class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 ">
131
+
<nav id="sitenav" class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
122
132
<div class="max-w-4xl mx-auto px-8 py-4">
123
133
<div class="flex justify-between gap-4">
124
134
<span class="flex-1">