components/firebird-shell/firebird-shell.component.html

0001 <app-shell-layout [(leftPaneVisible)]="leftPaneVisible" [(rightPaneVisible)]="rightPaneVisible">
0002
0003   <!-- Logo button opens the overflow navigation menu -->
0004   <div logo class="fb-slot">
0005     <button mat-icon-button [matMenuTriggerFor]="logoMenu" class="logo-button" matTooltip="Firebird">
0006       <img [src]="logoUrl" alt="Firebird logo" />
0007     </button>
0008     <mat-menu #logoMenu="matMenu">
0009       @for (item of overflowNavItems; track item.label) {
0010         <button mat-menu-item (click)="onNavItemClick(item)">
0011           @if (item.icon) { <mat-icon>{{ item.icon }}</mat-icon> }
0012           <span>{{ item.label }}</span>
0013         </button>
0014       }
0015       @if (appVersion) {
0016         <div mat-menu-item disabled class="version-item">v{{ appVersion }}</div>
0017       }
0018     </mat-menu>
0019   </div>
0020
0021   <!-- Primary navigation, then whatever the page contributes to the header -->
0022   <div header class="fb-slot">
0023     @for (item of primaryNavItems; track item.label) {
0024       <button mat-button (click)="onNavItemClick(item)" [attr.aria-label]="item.label" class="fb-nav-btn">
0025         @if (item.icon) { <mat-icon>{{ item.icon }}</mat-icon> }
0026         {{ item.label }}
0027       </button>
0028     }
0029     <ng-content select="[header]"></ng-content>
0030   </div>
0031
0032   <div mobile-header class="fb-slot">
0033     <ng-content select="[mobile-header]"></ng-content>
0034   </div>
0035
0036   <div header-right class="fb-slot">
0037     <ng-content select="[header-right]"></ng-content>
0038     <app-theme-switcher></app-theme-switcher>
0039   </div>
0040
0041   <!-- Mobile tools menu: navigation first, then page tools -->
0042   <div mobile-tools class="fb-col">
0043     @for (item of navItems; track item.label) {
0044       <button mat-button (click)="onNavItemClick(item)">
0045         @if (item.icon) { <mat-icon>{{ item.icon }}</mat-icon> }
0046         {{ item.label }}
0047       </button>
0048     }
0049     <ng-content select="[mobile-tools]"></ng-content>
0050   </div>
0051
0052   <div left-pane class="fb-slot">
0053     <ng-content select="[left-pane]"></ng-content>
0054   </div>
0055
0056   <div central-pane class="fb-slot">
0057     <ng-content select="[central-pane]"></ng-content>
0058   </div>
0059
0060   <div right-pane class="fb-slot">
0061     <ng-content select="[right-pane]"></ng-content>
0062   </div>
0063
0064   <div footer-left class="fb-slot">
0065     <ng-content select="[footer-left]"></ng-content>
0066   </div>
0067
0068   <div footer-center class="fb-slot">
0069     <ng-content select="[footer-center]"></ng-content>
0070   </div>
0071
0072   <div footer-right class="fb-slot">
0073     <ng-content select="[footer-right]"></ng-content>
0074   </div>
0075
0076 </app-shell-layout>