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 { .toc {
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
max-width: max-content; max-width: max-content;
@ -38,6 +39,11 @@
font-size: 1rem; font-size: 1rem;
} }
/* Sidebar Table of Contents */
.left-sidebar {
display: none;
}
.sidebar__toc { .sidebar__toc {
position: sticky; position: sticky;
top: 5rem; top: 5rem;
@ -63,4 +69,10 @@
padding-top: 0.5em; padding-top: 0.5em;
padding-left: 1.25rem; padding-left: 1.25rem;
list-style-type: disc; 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; const windowWidth = window.innerWidth;
if (windowWidth < 480) { if (windowWidth < 480) {
toc.removeAttribute('open'); toc.removeAttribute('open');
leftSidebar.classList.add('hidden');
} else { } else {
toc.setAttribute('open', true); 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() { function preventSidebarOverflow() {
if ( if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
document.documentElement.clientHeight < // tocSidebar.style.marginTop = "0";
tocSidebar.offsetHeight + 50 // tocSidebar.style.position = "static";
) { leftSidebar.style.display = "none";
tocSidebar.style.marginTop = "0"; } else {
tocSidebar.style.position = "static"; leftSidebar.style.display = "flex";
} }
} }
preventSidebarOverflow(); preventSidebarOverflow();