From 2d22ef1878b0bb8290ef832db1c4653ae5202415 Mon Sep 17 00:00:00 2001
From: Michael Krebs <michikrbs@gmail.com>
Date: Tue, 20 Feb 2024 07:09:22 +0100
Subject: [PATCH] docs: add `ScrollArea` to `TableOfContent.vue` (#351)

---
 .../theme/components/TableOfContent.vue         | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index 1c62ca15..e6c1e693 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -5,6 +5,7 @@ import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import TableOfContentTree from './TableOfContentTree.vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const headers = shallowRef<TableOfContents>()
 
@@ -22,7 +23,7 @@ function getHeadingsWithHierarchy(divId: string) {
   headings.forEach((heading: HTMLHeadingElement) => {
     const level = Number.parseInt(heading.tagName.charAt(1))
     if (!heading.id) {
-      const newId = heading.innerText
+      const newId = heading.textContent
         .replaceAll(/[^a-zA-Z0-9 ]/g, '')
         .replaceAll(' ', '-')
         .toLowerCase()
@@ -55,11 +56,15 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="space-y-2 hidden xl:block">
-    <p class="font-medium">
-      On This Page
-    </p>
-    <TableOfContentTree :tree="headers" :level="1" />
+  <div class="hidden xl:block">
+    <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
+      <div class="space-y-2">
+        <p class="font-medium">
+          On This Page
+        </p>
+        <TableOfContentTree :tree="headers" :level="1" />
+      </div>
+    </ScrollArea>
   </div>
 
   <div class="block xl:hidden mb-6">