45 lines
1.1 KiB
HTML
45 lines
1.1 KiB
HTML
<header class="header-bar" role="banner">
|
|
<h1 class="header-bar__title">Command Hub</h1>
|
|
|
|
<div class="header-bar__actions">
|
|
<!-- Live indicator -->
|
|
<button
|
|
class="header-bar__action-btn header-bar__live-btn"
|
|
mat-icon-button
|
|
[attr.aria-label]="isConnected() ? 'Connected — live' : 'Disconnected'"
|
|
>
|
|
<span
|
|
class="header-bar__live-dot"
|
|
[class.header-bar__live-dot--connected]="isConnected()"
|
|
></span>
|
|
<span class="header-bar__live-label">
|
|
{{ isConnected() ? 'Live' : 'Offline' }}
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Notification bell -->
|
|
<button
|
|
class="header-bar__action-btn"
|
|
mat-icon-button
|
|
aria-label="Notifications"
|
|
>
|
|
<mat-icon
|
|
[matBadge]="notificationCount()"
|
|
[matBadgeHidden]="notificationCount() === 0"
|
|
matBadgePosition="above after"
|
|
matBadgeSize="small"
|
|
>
|
|
notifications
|
|
</mat-icon>
|
|
</button>
|
|
|
|
<!-- Settings -->
|
|
<button
|
|
class="header-bar__action-btn"
|
|
mat-icon-button
|
|
aria-label="Settings"
|
|
>
|
|
<mat-icon>settings</mat-icon>
|
|
</button>
|
|
</div>
|
|
</header> |