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" aria-label="App Logo">
0010       <img src="assets/firebird/firebird-simplified-circle.png" width="32" height="32" 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">
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     <!-- Theme toggle inside mobile menu -->
0074     <app-theme-switcher class="theme-toggle-mobile"></app-theme-switcher>
0075   </div>
0076
0077   <!-- MAIN CONTENT AREA (split into leftPane, center, rightPane) -->
0078   <div class="main-content" #mainContent>
0079     <!-- LEFT PANE -->
0080     <div
0081       *ngIf="isLeftPaneVisible"
0082       class="pane left-pane"
0083       [style]="{ 'flex-basis': leftPaneWidth + 'px' }"
0084     >
0085       <ng-content select="[leftPane]"></ng-content>
0086       <ng-template #leftPaneContainer></ng-template>
0087     </div>
0088     <div
0089       *ngIf="isLeftPaneVisible"
0090       class="divider left-divider"
0091       (mousedown)="onMouseDownLeft($event)"
0092     ></div>
0093
0094     <!-- CENTER PANE -->
0095     <div class="central-pane">
0096       <ng-content select="[centralPane]"></ng-content>
0097     </div>
0098
0099     <!-- RIGHT PANE -->
0100     <div
0101       *ngIf="isRightPaneVisible"
0102       class="divider right-divider"
0103       (mousedown)="onMouseDownRight($event)"
0104     ></div>
0105     <div
0106       *ngIf="isRightPaneVisible"
0107       class="pane right-pane"
0108       [style]="{ 'flex-basis': rightPaneWidth + 'px' }"
0109     >
0110       <ng-content select="[rightPane]"></ng-content>
0111       <ng-template #rightPaneContainer></ng-template>
0112     </div>
0113   </div>
0114
0115   <!-- FOOTER -->
0116   <!-- FOOTER -->
0117   <div class="footer">
0118     <!-- Left part of footer -->
0119     <div class="footer-left">
0120       <ng-content select="[footer-left]"></ng-content>
0121     </div>
0122
0123     <!-- Center part of footer (existing 'footer' slot) -->
0124     <div class="footer-center">
0125       <ng-content select="[footer]"></ng-content>
0126     </div>
0127
0128     <!-- Right part of footer -->
0129     <div class="footer-right">
0130       <ng-content select="[footer-right]"></ng-content>
0131     </div>
0132   </div>
0133 </div>