34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-toc-overlay',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="fixed inset-0 z-50 bg-black/50" (click)="close.emit()"></div>
|
|
<div class="fixed inset-x-0 bottom-0 z-50 max-h-[70vh] rounded-t-2xl bg-white dark:bg-gray-900 shadow-2xl border-t border-gray-200 dark:border-gray-800">
|
|
<div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
|
|
<h2 class="text-base font-semibold">Sommaire</h2>
|
|
<button (click)="close.emit()" class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">✕</button>
|
|
</div>
|
|
<div class="p-3 overflow-y-auto">
|
|
<ul class="space-y-1 text-sm text-gray-700 dark:text-gray-300">
|
|
<li *ngFor="let h of headings">
|
|
<a (click)="onGo(h.id)" class="block px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer" [style.paddingLeft.rem]="(h.level - 1) * 0.75">{{ h.text }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class AppTocOverlayComponent {
|
|
@Input() headings: Array<{ level: number; text: string; id: string }> = [];
|
|
@Output() go = new EventEmitter<string>();
|
|
@Output() close = new EventEmitter<void>();
|
|
|
|
onGo(id: string) {
|
|
this.go.emit(id);
|
|
}
|
|
}
|