Merge remote-tracking branch 'origin/master'

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>
+          <li class="nav_li login-button" *ngIf="!isAuthenticated">
+            <a class="nav_link fake_link" (click)="openLoginDialog()">
+              Login
+            </a>
+          </li>
         </ul>
-        <ng-container *ngIf="!isAuthenticated">
+
-          <button mat-button (click)="openLoginDialog()" style="color: white">
-            Login
-          </button>
-        </ng-container>
         <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;
+  }
+}