feat: add observer to page component

src/app/components/Page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
 import { themes, useThemeContext } from '../theme';
 import { DocSection, DocsStructure } from '../types/types';
 import Main from './Main';
@@ -16,11 +17,41 @@ export default function Page({
 }) {
   const { theme } = useThemeContext();
   const themeStyles = themes[theme];
+  const docRef = useRef<HTMLDivElement>(null);
+  const [currentSection, setCurrentSection] = useState('');
+
+  useEffect(() => {
+    const titles =
+      document.querySelectorAll<HTMLHeadingElement>(
+        '.section-title'
+      );
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            setCurrentSection(entry.target.id);
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: '-10% 0% -80% 0%',
+        threshold: 1,
+      }
+    );
+
+    titles.forEach(title => observer.observe(title));
+
+    return () => {
+      titles.forEach(title => observer.unobserve(title));
+    };
+  }, []);
 
   return (
     <div className={styles.wrapper} style={themeStyles}>
       <SideBar version={version} />
-      <div className={styles.container}>
+      <div ref={docRef} className={styles.container}>
         <NavBar version={version} />
         <Main versionSections={versionSections} />
       </div>

src/docs/version_002/authentication/copy.md

@@ -1,4 +1,4 @@
-# Authentication {% #authentication %}
+# Authentication {% #authentication .section-title %}
 
 The Onpsring API uses API keys to authenticate requests. These keys are specific to a given Onspring instance. You can view and manage your API keys from within your instance.