Add Known Issues Page

src/app/features/header-menu/header-menu.html

@@ -1,18 +1,19 @@
 <div class="menu-left">
-  <div class="brand">
+  <div class="brand" [routerLink]="['/']">
     <img src="/logo_inverted.svg" alt="logo"/>
     <span><strong>ADOFAI Editor Forum</strong></span>
   </div>
 
-  <span>Levels</span>
-  <span>Community</span>
-  <span>Leaderboard</span>
-  <span>About</span>
+  <span class="dummy-link">Levels</span>
+  <span class="dummy-link">Community</span>
+  <span class="dummy-link">Leaderboard</span>
+  <span class="dummy-link">About</span>
 </div>
 
 <div class="menu-right">
-  <span><strong>Login</strong></span>
-  <span>Signup</span>
+  <span class="nav-link" [routerLink]="['/known-issues']">Known Issues</span>
+  <span class="dummy-link"><strong>Login</strong></span>
+  <span class="dummy-link">Signup</span>
 
   <span class="material-symbols-outlined icon-40 settings">settings</span>
 </div>

src/app/features/header-menu/header-menu.scss

@@ -29,6 +29,22 @@
       line-height: 40px;
       vertical-align: middle;
       white-space: nowrap;
+
+      &.nav-link {
+        font-weight: 700;
+        cursor: pointer;
+        color: oklch(0.5 0.15 250); // Primary color highlight (blue-ish)
+
+        transition: opacity 0.3s;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+
+      &.dummy-link {
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -42,6 +58,11 @@
       align-items: center;
       justify-content: start;
       gap: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+      }
 
       img {
         display: inline-block;

src/app/features/header-menu/header-menu.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'header-menu',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './header-menu.html',
   styleUrl: './header-menu.scss',
 })