add scrollbar to table of content

src/components/PostSideBar.astro

@@ -28,9 +28,9 @@ const toc = buildToc(headings);
 ---
 
 <aside>
-  <nav>
-    <button id="menu-button" aria-expanded="false">Table Of Contents</button>
-    <ul id="tableOfContents" class="tree">
+  <button id="menu-button" aria-expanded="false">Table Of Contents</button>
+  <nav id="tableOfContents">
+    <ul class="tree">
       <li><h1><a href="#">{title}</a></h1></li>
       {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
     </ul>
@@ -41,6 +41,22 @@ const toc = buildToc(headings);
   nav {
     position: sticky;
     top: 1.5rem;
+    max-height: calc(100vh - 8rem);
+    overflow-y: auto;
+  }
+
+  /* For browsers that support `scrollbar-*` properties */
+  @supports (scrollbar-width: auto) {
+    nav {
+      scrollbar-width: none;
+    }
+  }
+
+  /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+  @supports selector(::-webkit-scrollbar) {
+    nav::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   a:visited {

src/pages/changelog.md

@@ -1,6 +1,6 @@
 ---
 description: "Changelog for my website."
-lastmod: 2024-06-10
+lastmod: 2024-06-11
 layout: ../layouts/Single.astro
 title: Changelog
 toc: true
@@ -15,10 +15,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `Removed` for now removed features or content.
 - `Fixed` for any typos or bug fixes.
 
+## 2024-06-11
+
+- Added scrollbar to table of content
+
 ## 2024-06-10
 
 - Fixed link on `/now` page
 - Changed `Who am I?` section on home page to show my core values
 - Fixed styling to target `code` in list items as well
 - Added [this changelog](/changelog)
 - Added [Creating Something](/writing/creating-something) post
+
+## 2024-06-09
+
+- Deployed my website!