From 484ae744e04f7086d77f037078ac345a5a7cedbb Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Mon, 8 Jul 2024 09:52:14 -0400
Subject: [PATCH] feat(daffio): clean up docs table of contents UI (#2899)

---
 .../table-of-contents.component.html          |  7 ++++++-
 .../table-of-contents.component.scss          | 20 +++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
index 4c1a6244fc..b5c3e10299 100644
--- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
+++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
@@ -1,3 +1,8 @@
 <aside class="daffio-docs-table-of-contents">
-	<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
+	<div class="daffio-docs-table-of-contents__title">
+		On this page
+	</div>
+	<div class="daffio-docs-table-of-contents__links">
+		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
+	</div>
 </aside>
\ No newline at end of file
diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss
index d1c217f724..cd1692e69d 100644
--- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss
+++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss
@@ -5,26 +5,30 @@
 }
 
 .daffio-docs-table-of-contents {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
 	max-height: 100vh;
 	overflow: auto;
 	position: sticky;
 	top: calc(var(--daff-sidebar-side-fixed-top-shift) + 48px);
 
+	&__title {
+		@include daff.embolden();
+		margin: 0 0 24px;
+	}
+
+	&__links {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
 	&__item {
 		display: block;
 		font-size: 1rem;
 		line-height: 1.25rem;
 		text-decoration: none;
 
-		&:first-of-type {
-			@include daff.embolden();
-			margin: 0 0 24px;
-		}
-
 		&--level-1 {
+			display: none;
 			padding: 0;
 		}