components/shell/shell.component.html

0001 <div class="display-shell">
0002   <!-- TOP BAR / HEADER -->
0003   <mat-toolbar class="mat-elevation-z4 top-toolbar">
0004     <!-- Logo -->
0005 <!--    <button mat-icon-button [routerLink]="['/']" class="logo-button" aria-label="App Logo" >-->
0006 <!--      <img src="assets/firebird/firebird-simplified-circle.png" width="32" height="32" alt="App Logo" />-->
0007 <!--    </button>-->
0008
0009     <button mat-icon-button [matMenuTriggerFor]="logoMenu" class="logo-button hide-mobile" matTooltip="App Logo">
0010       <img src="assets/firebird/firebird-simplified-circle.png" alt="App Logo" />
0011     </button>
0012
0013     <!-- Always visible nav items on desktop -->
0014     <mat-menu #logoMenu="matMenu">
0015       <ng-container *ngFor="let item of navItems">
0016         <button mat-menu-item *ngIf="!item.alwaysVisible" (click)="onNavItemClick(item)">
0017           <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
0018           <span *ngIf="item.label">{{ item.label }}</span>
0019         </button>
0020       </ng-container>
0021     </mat-menu>
0022
0023     <!-- Always visible nav items on desktop -->
0024     <div class="nav-items visible-nav hide-mobile">
0025       <ng-container *ngFor="let item of navItems">
0026         <button
0027           mat-button
0028           *ngIf="item.alwaysVisible"
0029           (click)="onNavItemClick(item)"
0030           [attr.aria-label]="item.label"
0031         >
0032           <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
0033           {{ item.label }}
0034         </button>
0035       </ng-container>
0036     </div>
0037
0038     <!-- Middle section for page-specific controls -->
0039     <div class="middle-section hide-mobile">
0040       <ng-content select="[header]"></ng-content>
0041     </div>
0042
0043     <!-- Spacer to push the theme toggle to the far right -->
0044     <span class="flex-spacer"></span>
0045
0046     <!-- Theme toggle (desktop) -->
0047     <app-theme-switcher class="theme-toggle hide-mobile"></app-theme-switcher>
0048
0049     <!-- Hamburger menu button (mobile only) -->
0050     <button
0051       mat-icon-button
0052       class="hamburger-btn hide-desktop"
0053       (click)="toggleNavConfig()"
0054       aria-label="Toggle navigation menu"
0055     >
0056       <mat-icon>{{ navOpen ? 'close' : 'menu' }}</mat-icon>
0057     </button>
0058   </mat-toolbar>
0059
0060   <!-- Mobile menu overlay -->
0061   <div class="mobile-menu" [class.open]="navOpen">
0062     <ng-container *ngFor="let item of navItems">
0063       <!-- On mobile, show all items in the hamburger -->
0064       <button
0065         mat-button
0066         (click)="onNavItemClick(item)"
0067         [attr.aria-label]="item.label"
0068       >
0069         <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
0070         {{ item.label }}
0071       </button>
0072     </ng-container>
0073
0074     <div class="middle-section-mobile">
0075       <ng-content select="[header]"></ng-content>
0076     </div>
0077     <!-- Theme toggle inside mobile menu -->
0078     <app-theme-switcher class="theme-toggle-mobile"></app-theme-switcher>
0079   </div>
0080
0081   <!-- MAIN CONTENT AREA (split into leftPane, center, rightPane) -->
0082   <div class="main-content" #mainContent>
0083     <!-- LEFT PANE -->
0084     <div
0085       *ngIf="isLeftPaneVisible"
0086       class="pane left-pane"
0087       [style]="{ 'flex-basis': leftPaneWidth + 'px' }"
0088     >
0089       <ng-content select="[leftPane]"></ng-content>
0090       <ng-template #leftPaneContainer></ng-template>
0091     </div>
0092     <div
0093       *ngIf="isLeftPaneVisible"
0094       class="divider left-divider"
0095       (mousedown)="onMouseDownLeft($event)"
0096     ></div>
0097
0098     <!-- CENTER PANE -->
0099     <div class="central-pane">
0100       <ng-content select="[centralPane]"></ng-content>
0101     </div>
0102
0103     <!-- RIGHT PANE -->
0104     <div
0105       *ngIf="isRightPaneVisible"
0106       class="divider right-divider"
0107       (mousedown)="onMouseDownRight($event)"
0108     ></div>
0109     <div
0110       *ngIf="isRightPaneVisible"
0111       class="pane right-pane"
0112       [style]="{ 'flex-basis': rightPaneWidth + 'px' }"
0113     >
0114       <ng-content select="[rightPane]"></ng-content>
0115       <ng-template #rightPaneContainer></ng-template>
0116     </div>
0117   </div>
0118
0119   <!-- FOOTER -->
0120   <!-- FOOTER -->
0121   <div class="footer">
0122     <!-- Left part of footer -->
0123     <div class="footer-left">
0124       <ng-content select="[footer-left]"></ng-content>
0125     </div>
0126
0127     <!-- Center part of footer (existing 'footer' slot) -->
0128     <div class="footer-center">
0129       <ng-content select="[footer]"></ng-content>
0130     </div>
0131
0132     <!-- Right part of footer -->
0133     <div class="footer-right">
0134       <ng-content select="[footer-right]"></ng-content>
0135     </div>
0136   </div>
0137 </div>