From 32069b9a6a0bc6e10dfa74b811d539571ce026a7 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:44:35 +0800
Subject: [PATCH] Create sticky sidebar class

---
 src/_includes/global/toc.njk       | 7 +------
 src/_includes/main/content-nav.njk | 7 +------
 src/assets/css/main.css            | 9 ++++++---
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/_includes/global/toc.njk b/src/_includes/global/toc.njk
index 5e3acce0..e5edbedd 100644
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@@ -1,5 +1,5 @@
 <aside class="left-sidebar">
-    <details class="toc__wrapper" open>
+    <details class="toc__wrapper sidebar--sticky">
         <summary class="toc__heading">
             Table of Contents
         </summary>
@@ -8,11 +8,6 @@
 </aside>
 
 <style>
-    .toc__wrapper {
-        position: sticky;
-        top: 4rem;
-    }
-
     .toc__heading {
         font-size: 1.3rem;
         font-weight: 700;
diff --git a/src/_includes/main/content-nav.njk b/src/_includes/main/content-nav.njk
index 50ffdf95..a8bef282 100644
--- a/src/_includes/main/content-nav.njk
+++ b/src/_includes/main/content-nav.njk
@@ -1,5 +1,5 @@
 <aside class="right-sidebar">
-    <nav class="content__nav">
+    <nav class="content__nav sidebar--sticky">
         <h2 class="content__nav--title">Content Index</h2>
         <ul class="content__nav--links">
             {% for archive in collections.archive %}
@@ -14,11 +14,6 @@
 </aside>
 
 <style>
-    .content__nav {
-        position: sticky;
-        top: 4rem;
-    }
-
     .content__nav--title {
         font-size: 1.7rem;
     }
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ca5305c0..ece56761 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -273,9 +273,7 @@ main {
 
 .article,
 .content:not(.content--divided),
-.content__section,
-.left-sidebar,
-.right-sidebar {
+.content__section {
     background-color: var(--clr-content-bg);
 }
 
@@ -297,6 +295,11 @@ main {
     margin-top: 1.15em;
 }
 
+.sidebar--sticky {
+    position: sticky;
+    top: 4rem;
+}
+
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
     .content__wrapper {