feat(daffio): clean up docs table of contents UI (#2899)

graycoreio · Jul 8, 2024 · 484ae74 · 484ae74
1 parent 93a9656
commit 484ae74
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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>
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
@@ -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;
 		}