<div class="admin-header" role="banner">
    <div class="container header__inner">
        <!-- (Optional) Admin-Logo / Titel -->
        <div class="brand" tabindex="0" role="link" aria-label="Admin Home">
            <span class="material-symbols-outlined" aria-hidden="true">admin_panel_settings</span>
            <span class="brand__label">{{ getCurrentRouteLabel() }}</span>
        </div>

        <!-- NAV -->
        <nav id="admin-nav" class="admin-nav" [class.open]="open" role="navigation" aria-label="Admin Navigation"
            [attr.aria-hidden]="!open && isMobile ? 'true' : null">
            <a *ngFor="let route of routes" class="nav-link" routerLinkActive="nav-link--active"
                [routerLink]="normalize(route.path)" [routerLinkActiveOptions]="{ exact: true }"
                [attr.aria-label]="route.label" (click)="onNavClick()">
                <span class="material-symbols-outlined" *ngIf="route.icon" aria-hidden="true">{{ route.icon }}</span>
                <span class="nav-label">{{ route.label }}</span>
            </a>
        </nav>

        <!-- Burger -->
        <button class="nav-toggle" type="button" [attr.aria-expanded]="open" aria-controls="admin-nav"
            [attr.aria-label]="open ? 'Menü schließen' : 'Menü öffnen'" (click)="toggle()">
            <span class="material-symbols-outlined">{{ open ? 'close' : 'menu' }}</span>
        </button>
    </div>

    <!-- Backdrop -->
    <div class="backdrop" *ngIf="open" (click)="toggle()" aria-hidden="true"></div>
</div>