Add new routes and improve theme and header responsiveness

Added routes for 'community', 'nicknames', and 'nickgenerator'. Enhanced theme switch positioning and responsive design for smaller screens. Moved header login button to a more consistent position and upgraded Angular Material to version 19.2.19 for better compatibility.

frontend/package.json

@@ -18,7 +18,7 @@
     "@angular/compiler": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/forms": "^19.2.0",
-    "@angular/material": "^19.2.18",
+    "@angular/material": "^19.2.19",
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",

frontend/src/app/app.routes.ts

@@ -108,5 +108,17 @@ export const routes: Routes = [
   {
     path: 'forms',
     loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
-  }
+  },
+  {
+    path: 'community',
+    loadComponent: () => import('./pages/altitude/community/community.component').then(m => m.CommunityComponent)
+  },
+  {
+    path: 'nicknames',
+    loadComponent: () => import('./pages/reference/nicknames/nicknames.component').then(m => m.NicknamesComponent)
+  },
+  {
+    path: 'nickgenerator',
+    loadComponent: () => import('./pages/reference/nickgenerator/nickgenerator.component').then(m => m.NickgeneratorComponent)
+  },
 ];

frontend/src/app/pages/altitude/community/community.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 
 @Component({
   selector: 'app-community',

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

@@ -62,12 +62,17 @@
                   <li><a href="https://alttd.com/blog/">Blog</a></li>
                 </ul>
               </li>
+              <li *ngIf="!isAuthenticated">
+                <a (click)="openLoginDialog()">
+                  Login
+                </a>
+              </li>
             </ul>
           </div>
         </div>
         <a href="/"><img ngSrc="/public/img/logos/logo.png" priority alt="Altitude Server Logo" height="319"
                          width="550"></a>
-        <ul>
+        <ul id="nav_list">
           <li class="nav_li"><a [id]="getCurrentPageId(['home'])" class="nav_link" href="/" [ngClass]="active">Home</a>
           </li>
           <li class="nav_li">
@@ -137,12 +142,13 @@
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
             </ul>
           </li>
-        </ul>
-        <ng-container *ngIf="!isAuthenticated">
-          <button mat-button (click)="openLoginDialog()" style="color: white">
+          <li class="nav_li login-button" *ngIf="!isAuthenticated">
+            <a class="nav_link fake_link" (click)="openLoginDialog()">
               Login
-          </button>
-        </ng-container>
+            </a>
+          </li>
+        </ul>
+
         <app-theme></app-theme>
       </div>
     </nav>

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

@@ -259,6 +259,10 @@ nav img {
   display: none;
 }
 
+.login-button {
+  margin-left: 40px;
+}
+
 @-moz-document url-prefix() {
   .dropdown2 {
     top: 12px;
@@ -271,12 +275,6 @@ nav img {
   }
 }
 
-@media (max-width: 1000px) {
-  #scroll-button {
-    padding-top: 5px;
-  }
-}
-
 @media (max-width: 1150px) {
   .dropdown {
     top: -10px;
@@ -305,10 +303,6 @@ nav img {
     display: block;
     width: 100%;
   }
-
-  .switch-div {
-    top: 65px;
-  }
 }
 
 @media (max-width: 690px) {
@@ -340,10 +334,6 @@ nav img {
     background: none;
     border-bottom: 3px solid var(--pureblack);
   }
-
-  .switch-div {
-    top: 33px;
-  }
 }
 
 @media (min-width: 690px) {

frontend/src/app/pages/home/home.component.scss

@@ -322,6 +322,7 @@ main .container {
 
   #header-img {
     width: 65%;
+    height: 18%;
   }
 
   .title {

frontend/src/app/pages/reference/nickgenerator/nickgenerator.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 
 @Component({
   selector: 'app-nickgenerator',

frontend/src/app/pages/reference/nicknames/nicknames.component.html

@@ -29,7 +29,7 @@
               color options. These colors will be in the form of <span
                 style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
               that you can easily use them later.</p>
-            <img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+            <img ngSrc="/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
                  width="480">
             <p>Output of /colorsextra</p>
             <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to

frontend/src/app/pages/reference/nicknames/nicknames.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/shared-components/theme/theme.component.html

@@ -1,4 +1,4 @@
-<div class="switch-div" style="z-index: 1;">
+<div class="switch-div">
   <label class="switch">
     <input type="checkbox" [checked]="isDarkMode" (change)="toggleTheme()" id="slider">
     <span class="slider round"></span>

frontend/src/app/shared-components/theme/theme.component.scss

@@ -7,7 +7,9 @@
 }
 
 .switch-div {
+  position: absolute;
   right: 40px;
+  z-index: 1;
 }
 
 /* Hide default HTML checkbox */
@@ -72,3 +74,16 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+@media (max-width: 1150px) {
+  .switch-div {
+    top: 65px;
+  }
+}
+
+@media (max-width: 690px) {
+  .switch-div {
+    top: 33px;
+    margin-right: 25px;
+  }
+}