Update new material component styles

firebird-ng/angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": [],
@@ -101,6 +102,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": [],

firebird-ng/src/app/app.component.ts

@@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, RouterModule],
+  imports: [RouterOutlet, RouterModule],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })

firebird-ng/src/app/app.routes.ts

@@ -17,7 +17,7 @@ export const routes: Routes = [
     loadComponent: () => import('./pages/geometry-tree/scene-tree.component').then(m => m.SceneTreeComponent)
   },
   {
-    path: 'testdp',
+    path: 'shell',
     loadComponent: () => import('./pages/shell-example/shell-example.component').then(m => m.ShellExampleComponent)
   },
   {

firebird-ng/src/app/components/header/header.component.html

@@ -0,0 +1,62 @@
+<!-- firebird-ng/src/app/components/nav-config/nav-config.component.html -->
+
+<mat-toolbar class="mat-elevation-z4 top-toolbar">
+  <!-- Logo -->
+  <button mat-icon-button [routerLink]="['/']" class="logo-button" aria-label="App Logo">
+    <img ngSrc="assets/firebird/firebird-simplified-circle.png" width="32" height="32" alt="App Logo" />
+  </button>
+
+  <!-- Always visible nav items on desktop -->
+  <div class="nav-items visible-nav hide-mobile">
+    <ng-container *ngFor="let item of navItems">
+      <button
+        mat-button
+        *ngIf="item.alwaysVisible"
+        (click)="onNavItemClick(item)"
+        [attr.aria-label]="item.label"
+      >
+        <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
+        {{ item.label }}
+      </button>
+    </ng-container>
+  </div>
+
+  <!-- Middle section for page-specific controls -->
+  <div class="middle-section">
+    <ng-container *ngIf="middleTemplate">
+      <ng-container *ngTemplateOutlet="middleTemplate"></ng-container>
+    </ng-container>
+  </div>
+
+  <!-- Spacer to push theme toggle to the right -->
+  <span class="flex-spacer"></span>
+
+  <!-- Theme toggle button (always visible on desktop) -->
+  <app-theme-switcher class="theme-toggle hide-mobile"></app-theme-switcher>
+
+  <!-- Hamburger menu button (only visible on mobile) -->
+  <button
+    mat-icon-button
+    class="hamburger-btn hide-desktop"
+    (click)="toggleNavConfig()"
+    aria-label="Toggle navigation menu"
+  >
+    <mat-icon>{{ navOpen ? 'close' : 'menu' }}</mat-icon>
+  </button>
+</mat-toolbar>
+
+<!-- Mobile menu overlay -->
+<div class="mobile-menu" [class.open]="navOpen">
+  <ng-container *ngFor="let item of navItems">
+    <button
+      mat-button
+      (click)="onNavItemClick(item)"
+      [attr.aria-label]="item.label"
+    >
+      <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
+      {{ item.label }}
+    </button>
+  </ng-container>
+  <!-- Theme toggle inside mobile menu -->
+  <app-theme-switcher class="theme-toggle-mobile"></app-theme-switcher>
+</div>