Adjust sidebar ToC style

This commit is contained in:
Helen Chong 2023-08-29 09:05:04 +08:00
parent 25c6146034
commit d49c135c71
2 changed files with 19 additions and 9 deletions

View File

@ -1,3 +1,4 @@
/* Article Table of Contents */
.toc {
background-color: var(--clr-quote-bg);
max-width: max-content;
@ -38,6 +39,11 @@
font-size: 1rem;
}
/* Sidebar Table of Contents */
.left-sidebar {
display: none;
}
.sidebar__toc {
position: sticky;
top: 5rem;
@ -64,3 +70,9 @@
padding-left: 1.25rem;
list-style-type: disc;
}
@media only screen and (min-width: 43.75rem) {
.left-sidebar {
display: flex;
}
}

View File

@ -60,20 +60,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
const windowWidth = window.innerWidth;
if (windowWidth < 480) {
toc.removeAttribute('open');
leftSidebar.classList.add('hidden');
} else {
toc.setAttribute('open', true);
leftSidebar.classList.remove('hidden');
}
// Don't make the sidebar ToC sticky if it is larger than screen height
// Hide the left sidebar if the ToC is larger than screen height
function preventSidebarOverflow() {
if (
document.documentElement.clientHeight <
tocSidebar.offsetHeight + 50
) {
tocSidebar.style.marginTop = "0";
tocSidebar.style.position = "static";
if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
// tocSidebar.style.marginTop = "0";
// tocSidebar.style.position = "static";
leftSidebar.style.display = "none";
} else {
leftSidebar.style.display = "flex";
}
}
preventSidebarOverflow();