Remove sidebar ToC for articles with long headings

This commit is contained in:
Helen Chong 2023-08-29 13:26:09 +08:00
parent 115f39a4ec
commit edef108656
3 changed files with 4 additions and 14 deletions

View File

@ -1,6 +1,5 @@
// Auto generate table of contents // Auto generate table of contents
// Code based on https://techindetail.com/table-of-contents-javascript/ // Code based on https://techindetail.com/table-of-contents-javascript/
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
const article = document.querySelector("article"); const article = document.querySelector("article");
const headings = article.querySelectorAll("h2, h3"); const headings = article.querySelectorAll("h2, h3");
@ -55,15 +54,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
leftSidebar.classList.add('hidden'); leftSidebar.classList.add('hidden');
} }
// Open the article ToC and hide the left sidebar for small screen size
// Code based on https://codepen.io/neptotech/pen/RwjRjOZ
const windowWidth = window.innerWidth;
if (windowWidth < 480) {
toc.removeAttribute('open');
} else {
toc.setAttribute('open', true);
}
// Remove the stickiness of the sidebar ToC if it is larger than screen height // Remove the stickiness of the sidebar ToC if it is larger than screen height
function preventSidebarOverflow() { function preventSidebarOverflow() {
if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) { if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {

View File

@ -34,11 +34,11 @@
</header> </header>
<nav class="navbar"></nav> <nav class="navbar"></nav>
<main> <main>
<aside class="left-sidebar"> <!-- <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
</div> </div>
</aside> </aside> -->
<article> <article>
<section class="article-section"> <section class="article-section">

View File

@ -34,11 +34,11 @@
</header> </header>
<nav class="navbar"></nav> <nav class="navbar"></nav>
<main> <main>
<aside class="left-sidebar"> <!-- <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
</div> </div>
</aside> </aside> -->
<article> <article>
<section class="article-section"> <section class="article-section">