Update flare-ui/src/app/components/main/main.component.ts

flare-ui/src/app/components/main/main.component.ts

@@ -1,65 +1,119 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatDividerModule } from '@angular/material/divider';
 import { AuthService } from '../../services/auth.service';
 import { ActivityLogComponent } from '../activity-log/activity-log.component';
 
 @Component({
   selector: 'app-main',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, ActivityLogComponent],
+  imports: [
+    CommonModule, 
+    RouterLink, 
+    RouterLinkActive, 
+    RouterOutlet,
+    MatToolbarModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatBadgeModule,
+    MatDividerModule,
+    ActivityLogComponent
+  ],
   template: `
     <div class="main-layout">
-      <header class="header">
-        <div class="header-content">
-          <h1>Flare Administration</h1>
+      <mat-toolbar color="primary" class="header-toolbar">
+        <mat-toolbar-row>
+          <span class="logo">
+            <mat-icon>dashboard</mat-icon>
+            Flare Administration
+          </span>
+          
+          <span class="spacer"></span>
+          
           <div class="header-actions">
-            <span class="username">{{ username }}</span>
-            <button class="notification-btn" (click)="toggleActivityLog()">
-              🔔
-              @if (showActivityLog) {
+            <span class="username">
+              <mat-icon>person</mat-icon>
+              {{ username }}
+            </span>
+            
+            <button mat-icon-button 
+                    (click)="toggleActivityLog()"
+                    matTooltip="Activity Log">
+              <mat-icon>notifications</mat-icon>
+            </button>
+            
+            @if (showActivityLog) {
+              <div class="activity-log-wrapper" (click)="$event.stopPropagation()">
                 <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
-              }
+              </div>
+            }
+            
+            <button mat-icon-button [matMenuTriggerFor]="userMenu" matTooltip="User Menu">
+              <mat-icon>account_circle</mat-icon>
             </button>
-            <button class="btn btn-secondary" (click)="logout()">Logout</button>
+            
+            <mat-menu #userMenu="matMenu">
+              <button mat-menu-item routerLink="/user-info">
+                <mat-icon>settings</mat-icon>
+                <span>User Settings</span>
+              </button>
+              <mat-divider></mat-divider>
+              <button mat-menu-item (click)="logout()">
+                <mat-icon>exit_to_app</mat-icon>
+                <span>Logout</span>
+              </button>
+            </mat-menu>
           </div>
-        </div>
-      </header>
-
-      <nav class="tabs">
-        <a
-          routerLink="/user-info"
-          routerLinkActive="active"
-          class="tab"
-        >
+        </mat-toolbar-row>
+      </mat-toolbar>
+
+      <nav mat-tab-nav-bar class="nav-tabs">
+        <a mat-tab-link
+           routerLink="/user-info"
+           routerLinkActive #rla1="routerLinkActive"
+           [active]="rla1.isActive">
+          <mat-icon>person</mat-icon>
           User Info
         </a>
-        <a
-          routerLink="/environment"
-          routerLinkActive="active"
-          class="tab"
-        >
+        
+        <a mat-tab-link
+           routerLink="/environment"
+           routerLinkActive #rla2="routerLinkActive"
+           [active]="rla2.isActive">
+          <mat-icon>settings</mat-icon>
           Environment
         </a>
-        <a
-          routerLink="/apis"
-          routerLinkActive="active"
-          class="tab"
-        >
+        
+        <a mat-tab-link
+           routerLink="/apis"
+           routerLinkActive #rla3="routerLinkActive"
+           [active]="rla3.isActive">
+          <mat-icon>api</mat-icon>
           APIs
         </a>
-        <a
-          routerLink="/projects"
-          routerLinkActive="active"
-          class="tab"
-        >
+        
+        <a mat-tab-link
+           routerLink="/projects"
+           routerLinkActive #rla4="routerLinkActive"
+           [active]="rla4.isActive">
+          <mat-icon>folder_special</mat-icon>
           Projects
         </a>
-        <a
-          routerLink="/test"
-          routerLinkActive="active"
-          class="tab"
-        >
+        
+        <a mat-tab-link
+           routerLink="/test"
+           routerLinkActive #rla5="routerLinkActive"
+           [active]="rla5.isActive">
+          <mat-icon>bug_report</mat-icon>
           Test
         </a>
       </nav>
@@ -69,93 +123,81 @@ import { ActivityLogComponent } from '../activity-log/activity-log.component';
       </main>
     </div>
   `,
-styles: [`
+  styles: [`
     .main-layout {
       height: 100vh;
       display: flex;
       flex-direction: column;
+      background-color: #fafafa;
     }
 
-    .header {
-      background-color: #fff;
-      border-bottom: 1px solid #dee2e6;
-      padding: 1rem 0;
+    .header-toolbar {
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      z-index: 100;
+      position: relative;
 
-      .header-content {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
+      .logo {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        gap: 8px;
+        font-size: 20px;
+        font-weight: 500;
 
-        h1 {
-          font-size: 1.5rem;
-          color: #333;
-          margin: 0;
+        mat-icon {
+          font-size: 28px;
+          width: 28px;
+          height: 28px;
         }
       }
 
+      .spacer {
+        flex: 1 1 auto;
+      }
+
       .header-actions {
         display: flex;
         align-items: center;
-        gap: 1rem;
+        gap: 8px;
+        position: relative;
 
         .username {
-          font-weight: 500;
-          color: #495057;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          margin-right: 16px;
+
+          mat-icon {
+            font-size: 20px;
+            width: 20px;
+            height: 20px;
+          }
         }
 
-        .notification-btn {
-          position: relative;
-          background: none;
-          border: 1px solid #dee2e6;
-          border-radius: 4px;
-          font-size: 1.25rem;
-          cursor: pointer;
-          padding: 0.5rem;
-          transition: all 0.2s;
-          
-          &:hover {
-            background-color: #f8f9fa;
-            border-color: #adb5bd;
-          }
+        .activity-log-wrapper {
+          position: absolute;
+          top: 56px;
+          right: 0;
+          z-index: 1000;
         }
       }
     }
 
-    .tabs {
-      background-color: #fff;
-      border-bottom: 2px solid #dee2e6;
-      max-width: 1200px;
-      width: 100%;
-      margin: 0 auto;
-      padding: 0 20px;
-      display: flex;
+    .nav-tabs {
+      background-color: white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
 
-      a {
-        text-decoration: none;
-      }
-      
-      .tab {
-        padding: 0.75rem 1.25rem;
-        cursor: pointer;
-        border: none;
-        background: none;
-        font-weight: 500;
-        color: #6c757d;
-        transition: all 0.3s ease;
-        border-bottom: 2px solid transparent;
-        margin-bottom: -2px;
-
-        &.active {
-          color: #007bff;
-          border-bottom-color: #007bff;
-        }
+      ::ng-deep {
+        .mat-mdc-tab-link {
+          min-width: 120px;
+          opacity: 0.8;
 
-        &:hover:not(.active) {
-          color: #495057;
-          background-color: #f8f9fa;
+          mat-icon {
+            margin-right: 8px;
+          }
+
+          &.mdc-tab--active {
+            opacity: 1;
+          }
         }
       }
     }
@@ -163,13 +205,7 @@ styles: [`
     .content {
       flex: 1;
       overflow-y: auto;
-      padding: 2rem 0;
-
-      > * {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-      }
+      padding: 24px;
     }
   `]
 })