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

This commit is contained in:
Helen Chong 2024-05-22 15:51:56 +08:00
parent de01b43d42
commit f4ed35b9fb
2 changed files with 11 additions and 6 deletions

View File

@ -32,6 +32,9 @@
<link rel="manifest" href="/assets/favicon/site.webmanifest"> <link rel="manifest" href="/assets/favicon/site.webmanifest">
{% endblock %} {% endblock %}
{# JavaScript #}
<script src="/assets/js/details-utils.js" defer></script>
<title> <title>
{% block pageTitle %}{{ title + " | " if title }}{{ sitemeta.siteName | safe }}{% endblock %} {% block pageTitle %}{{ title + " | " if title }}{{ sitemeta.siteName | safe }}{% endblock %}
</title> </title>

View File

@ -1,10 +1,12 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<details class="toc__wrapper sidebar--sticky"> <details-utils force-open="(min-width: 60rem)" force-restore>
<summary class="toc__heading"> <details class="toc__wrapper sidebar--sticky">
On This Page <summary class="toc__heading">
</summary> Table of Contents
{{ content | toc | safe }} </summary>
</details> {{ content | toc | safe }}
</details>
</details-utils>
</aside> </aside>
<style> <style>