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">
{% endblock %}
{# JavaScript #}
<script src="/assets/js/details-utils.js" defer></script>
<title>
{% block pageTitle %}{{ title + " | " if title }}{{ sitemeta.siteName | safe }}{% endblock %}
</title>

View File

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