93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { Router } from '@angular/router';
|
|
import { Observable } from 'rxjs';
|
|
import { BreadcrumbItem, BreadcrumbService } from '../../services/breadcrumb.service';
|
|
|
|
@Component({
|
|
selector: 'app-breadcrumb',
|
|
standalone: true,
|
|
imports: [CommonModule, MatIconModule],
|
|
template: `
|
|
<nav class="breadcrumb-nav" *ngIf="breadcrumbs$ | async as breadcrumbs">
|
|
<ol class="breadcrumb-list">
|
|
<li
|
|
*ngFor="let item of breadcrumbs; let last = last"
|
|
class="breadcrumb-item"
|
|
[class.active]="item.isActive"
|
|
>
|
|
<a
|
|
*ngIf="!item.isActive; else activeItem"
|
|
[routerLink]="item.url"
|
|
class="breadcrumb-link"
|
|
>
|
|
{{ item.label }}
|
|
</a>
|
|
<ng-template #activeItem>
|
|
<span class="breadcrumb-active">{{ item.label }}</span>
|
|
</ng-template>
|
|
<mat-icon *ngIf="!last" class="breadcrumb-separator">chevron_right</mat-icon>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
`,
|
|
styles: [`
|
|
.breadcrumb-nav {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.breadcrumb-list {
|
|
display: flex;
|
|
align-items: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.breadcrumb-link {
|
|
color: #6b7280;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.breadcrumb-link:hover {
|
|
color: #374151;
|
|
}
|
|
|
|
.breadcrumb-active {
|
|
color: #111827;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
color: #9ca3af;
|
|
font-size: 1rem;
|
|
}
|
|
`]
|
|
})
|
|
export class BreadcrumbComponent implements OnInit {
|
|
breadcrumbs$: Observable<BreadcrumbItem[]>;
|
|
|
|
constructor(
|
|
private breadcrumbService: BreadcrumbService,
|
|
private router: Router
|
|
) {
|
|
this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
|
|
}
|
|
|
|
ngOnInit() {
|
|
// Initialize breadcrumbs for current route
|
|
this.breadcrumbService.breadcrumbs$.subscribe();
|
|
}
|
|
}
|