Fix sidebar not scrolling to active chapter on page load (#8)

The sidebar stayed at the top regardless of which chapter was active,
forcing users to manually scroll to find their current position.

Add data-active attribute to the active link and scroll it into view
on page load.

Co-authored-by: Ona <no-reply@ona.com>

Author: Siddhant-K-code

src/components/Sidebar.astro

@@ -51,6 +51,7 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
                       ? "text-[var(--text-primary)] font-medium bg-[var(--bg-tertiary)]"
                       : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
                   ]}
+                  {...(isActive ? { "data-active": "", "aria-current": "page" } : {})}
                 >
                   {ch.chapter && (
                     <span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] mt-0.5 shrink-0 w-5">
@@ -69,6 +70,15 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 </aside>
 
 <script>
+  // Scroll the active sidebar link into view on page load
+  const activeLink = document.querySelector('#sidebar a[data-active]');
+  if (activeLink) {
+    // Use requestAnimationFrame to ensure layout is complete before scrolling
+    requestAnimationFrame(() => {
+      activeLink.scrollIntoView({ block: 'center', behavior: 'instant' });
+    });
+  }
+
   document.querySelectorAll('#sidebar a').forEach(link => {
     link.addEventListener('click', () => {
       if (window.innerWidth < 1024) {