42 lines
1.9 KiB
TypeScript
42 lines
1.9 KiB
TypeScript
import {
|
||
ChangeDetectionStrategy,
|
||
Component,
|
||
ViewChild,
|
||
} from '@angular/core';
|
||
import { RouterLink } from '@angular/router';
|
||
import { PinDialogComponent } from '../../shared/components/pin-dialog/pin-dialog.component';
|
||
|
||
@Component({
|
||
selector: 'app-header',
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
imports: [RouterLink, PinDialogComponent],
|
||
template: `
|
||
<header class="app-header" role="banner">
|
||
<a routerLink="/" class="brand" aria-label="PV Pulse – Startseite">
|
||
<span class="brand-icon" aria-hidden="true">☀️</span>
|
||
<span class="brand-name">PV Pulse</span>
|
||
</a>
|
||
<nav class="main-nav" aria-label="Hauptnavigation">
|
||
<a routerLink="/dashboard">Dashboard</a>
|
||
<a routerLink="/plants">Anlagen</a>
|
||
</nav>
|
||
<button
|
||
class="settings-btn"
|
||
(click)="pinDialog.open()"
|
||
aria-label="Einstellungen öffnen"
|
||
title="Einstellungen"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<path d="M12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm7.43-2.03c.04-.32.07-.65.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11.5c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.58 1.69-.98l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
|
||
<app-pin-dialog #pinDialog />
|
||
`,
|
||
styleUrl: './header.component.scss',
|
||
})
|
||
export class HeaderComponent {
|
||
@ViewChild('pinDialog') pinDialog!: PinDialogComponent;
|
||
}
|