Use details-utils to force open or close ToC based on viewports

2024-05-22 15:51:56 +08:00 · 2024-05-22 15:51:56 +08:00 · f4ed35b9fb
parent de01b43d42
commit f4ed35b9fb
2 changed files with 11 additions and 6 deletions
--- a/src/_includes/global/baselayout.njk
+++ b/src/_includes/global/baselayout.njk
@ -32,6 +32,9 @@
            <link rel="manifest" href="/assets/favicon/site.webmanifest">
        {% endblock %}

+        {# JavaScript #}
+        <script src="/assets/js/details-utils.js" defer></script>
+
        <title>
            {% block pageTitle %}{{ title + " | " if title }}{{ sitemeta.siteName | safe }}{% endblock %}
        </title>
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@ -1,10 +1,12 @@
 <aside class="left-sidebar">
+    <details-utils force-open="(min-width: 60rem)" force-restore>
        <details class="toc__wrapper sidebar--sticky">
            <summary class="toc__heading">
-            On This Page
+                Table of Contents
            </summary>
            {{ content | toc | safe }}
        </details>
+    </details-utils>
 </aside>

 <style>