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