feat: support h3 subheadings in toc

spartan-ng · Dec 27, 2023 · 144ac65 · 144ac65
1 parent 6179c34
commit 144ac65
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts b/apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts
@@ -67,14 +67,14 @@ export const routeMeta: RouteMeta = {
 			</div>
 
 			<spartan-section-sub-heading id="examples">Examples</spartan-section-sub-heading>
-			<h3 class="${hlmH4} mb-2 mt-6">Default</h3>
+			<h3 id="examples__default" class="${hlmH4} mb-2 mt-6">Default</h3>
 			<spartan-tabs firstTab="Preview" secondTab="Code">
 				<div spartanCodePreview firstTab>
 					<spartan-tabs-preview />
 				</div>
 				<spartan-code secondTab [code]="defaultCode" />
 			</spartan-tabs>
-			<h3 class="${hlmH4} mb-2 mt-6">Vertical</h3>
+			<h3 id="examples__vertical" class="${hlmH4} mb-2 mt-6">Vertical</h3>
 			<spartan-tabs firstTab="Preview" secondTab="Code">
 				<div spartanCodePreview firstTab>
 					<spartan-tabs-vertical />

diff --git a/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts b/apps/app/src/app/shared/layout/page-nav/page-nav.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import {
 	AfterViewInit,
 	Component,
@@ -17,12 +18,13 @@ import { PageNavLinkComponent } from './page-nav-link.component';
 type SamePageAnchorLink = {
 	id: string;
 	label: string;
+	isNested: boolean;
 };
 
 @Component({
 	selector: 'spartan-page-nav',
 	standalone: true,
-	imports: [HlmScrollAreaComponent, PageNavLinkComponent],
+	imports: [HlmScrollAreaComponent, NgClass, PageNavLinkComponent],
 	host: {
 		class: 'hidden xl:block text-sm',
 	},
@@ -34,7 +36,11 @@ type SamePageAnchorLink = {
 					<ul class="m-0 flex list-none flex-col">
 						<ng-content />
 						@for (link of links(); track link.id) {
-							<spartan-page-nav-link [fragment]="link.id" [label]="link.label" />
+							<spartan-page-nav-link
+								[ngClass]="{ 'border-muted-foreground pl-4': link.isNested }"
+								[fragment]="link.id"
+								[label]="link.label"
+							/>
 						} @empty {
 							@if (isDevMode()) {
 								[DEV] Nothing to see here!
@@ -56,11 +62,14 @@ export class PageNavComponent implements OnInit, AfterViewInit, OnDestroy {
 	private page: HTMLElement = (inject(ElementRef).nativeElement as HTMLElement).previousSibling as HTMLElement;
 
 	ngOnInit() {
-		const headings = Array.from(this.page.querySelectorAll('spartan-section-sub-heading'));
-		const links = headings.map(({ id, children }) => ({
-			id,
-			label: children[0].childNodes[0].textContent ?? '[DEV] Empty heading!',
-		}));
+		const selectors = ['spartan-section-sub-heading', '[spartanMainSection] > h3'];
+		const headings = Array.from(this.page.querySelectorAll(selectors.join(',')));
+		const links = headings.map((element) => {
+			const { id, children, localName, textContent } = element;
+			const isSubHeading = localName === 'spartan-section-sub-heading';
+			const label = (isSubHeading ? children[0].childNodes[0].textContent : textContent) ?? '[DEV] Empty heading!';
+			return { id, label, isNested: !isSubHeading };
+		});
 		this.links.set(links);
 	}
 	ngAfterViewInit() {