chore(#46): migrate header to ng material

frontend/angular.json

@@ -88,10 +88,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "@angular/material/prebuilt-themes/purple-green.css",
-              "src/styles.scss"
-            ],
+            "styles": ["@angular/material/prebuilt-themes/purple-green.css", "src/styles.scss"],
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"]
           }

frontend/package.json

@@ -69,4 +69,4 @@
     "ts-node": "10.9.2",
     "typescript": "5.4.5"
   }
-}
+}

frontend/src/app/app.module.ts

@@ -12,6 +12,10 @@ import { LoginComponent } from './components/login/login.component';
 import { MessageComponent } from './components/message/message.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { httpInterceptorProviders } from './interceptors';
+import { MatToolbar } from '@angular/material/toolbar';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -29,6 +33,10 @@ import { httpInterceptorProviders } from './interceptors';
     HttpClientModule,
     NgbModule,
     FormsModule,
+    MatToolbar,
+    MatIcon,
+    MatIconButton,
+    MatTooltip,
   ],
   providers: [httpInterceptorProviders],
   bootstrap: [AppComponent],

frontend/src/app/components/header/header.component.html

@@ -1,44 +1,39 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <a class="navbar-brand ml-lg-5" href="">SE PR Group Phase</a>
-  <button
-    class="navbar-toggler ml-5"
-    type="button"
-    data-toggle="collapse"
-    data-target="#navbarSupportedContent"
-    aria-controls="navbarSupportedContent"
-    aria-expanded="false"
-    aria-label="Toggle navigation"
-  >
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          *ngIf="authService.isLoggedIn()"
-          routerLink="/message"
-          routerLinkActive="active"
-          >Message</a
-        >
-      </li>
-    </ul>
-    <ul class="navbar-nav mr-5">
-      <a
-        class="nav-link"
-        *ngIf="!authService.isLoggedIn()"
-        routerLink="/login"
-        routerLinkActive="active"
-        >Login</a
-      >
-      <a
-        class="nav-link"
-        *ngIf="authService.isLoggedIn()"
-        routerLink="/"
-        (click)="authService.logoutUser()"
-        >Logout</a
-      >
-    </ul>
-  </div>
+<nav>
+  <mat-toolbar>
+    <div class="header-toolbar-container">
+      <div class="header-title">
+        <a [routerLink]="''" class="no-decoration">
+          <h1>SE PR Group Phase</h1>
+        </a>
+      </div>
+      <div class="header-nav-links">
+        @if (authService.isLoggedIn()) {
+          <a [routerLink]="'/message'" class="no-decoration">Message</a>
+        }
+      </div>
+      <div class="header-login-links">
+        @if (authService.isLoggedIn()) {
+          <button
+            mat-icon-button
+            aria-label="Account information"
+            [matTooltip]="'Account information'"
+          >
+            <mat-icon>person</mat-icon>
+          </button>
+          <button
+            (click)="authService.logoutUser()"
+            mat-icon-button
+            aria-label="Logout"
+            [matTooltip]="'Logout'"
+          >
+            <mat-icon>logout</mat-icon>
+          </button>
+        } @else {
+          <button [routerLink]="'/login'" mat-icon-button aria-label="Login" [matTooltip]="'Login'">
+            <mat-icon>login</mat-icon>
+          </button>
+        }
+      </div>
+    </div>
+  </mat-toolbar>
 </nav>

frontend/src/app/components/header/header.component.scss

@@ -0,0 +1,27 @@
+.header-nav-links {
+  grid-area: nav-links;
+  font-size: 1rem;
+  display: flex;
+  gap: 1rem;
+}
+
+.header-title {
+  grid-area: title;
+}
+
+.header-login-links {
+  grid-area: login-links;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+.header-toolbar-container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  grid-template-areas: 'title nav-links login-links';
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}

frontend/src/index.html

@@ -5,9 +5,12 @@
     <title>SE PR Group Phase</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
   <body class="mat-typography">
     <app-root></app-root>
   </body>

frontend/src/styles.scss

@@ -2,3 +2,17 @@
 body {
   background-color: whitesmoke;
 }
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+a.no-decoration {
+  text-decoration: none;
+  color: inherit;
+}