Leilukin/leilukin-site
1
0
Fork 0
mirror of https://github.com/helenclx/leilukin-site.git synced 2025-04-11 10:32:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add scrollbar to table of contents if overflowed

Browse Source
This commit is contained in:
Helen Chong 2024-04-18 12:12:22 +08:00
parent 32069b9a6a
commit f1450c8a9b
1 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/_includes/global/toc.njk
View File

@ -1,13 +1,20 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<details class="toc__wrapper sidebar--sticky"> <details class="toc__wrapper sidebar--sticky">
<summary class="toc__heading"> <summary class="toc__heading">
Table of Contents On This Page
</summary> </summary>
{{ content | toc | safe }} {{ content | toc | safe }}
</details> </details>
</aside> </aside>
<style> <style>
.toc__wrapper {
max-height: 89vh;
overflow: auto;
background-color: var(--clr-content-bg);
padding: 1rem 1.3rem;
}
.toc__heading { .toc__heading {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
@ -16,14 +23,14 @@
} }
.toc ol, .toc ol,
.toc ol ol { .toc ol ol {
display: grid; display: grid;
gap: 0.3em; gap: 0.3em;
} }
.toc ol { .toc ol {
border-top: 0.1em solid var(--clr-title-border); border-top: 0.1em solid var(--clr-title-border);
padding-left: 1.5em; padding-left: 1.7em;
padding-top: 1em; padding-top: 1em;
} }
@ -44,22 +51,3 @@
font-size: 1rem; font-size: 1rem;
} }
</style> </style>
<script defer>
// Close article ToC accordion for small screen sizes
const tocWrapper = docucument.querySelector('.toc__wrapper');
if (window.innerWidth < 480) {
tocWrapper.removeAttribute("open");
} else {
tocWrapper.setAttribute("open", true);
}
// Remove the stickiness of the sidebar ToC if it is larger than screen height
function preventSidebarOverflow() {
if (document.documentElement.clientHeight < tocWrapper.offsetHeight + 50) {
tocWrapper.style.marginTop = "0";
tocWrapper.style.position = "static";
}
}
preventSidebarOverflow();
</script>