style(navigation): implement new navigation-bar

src/app/core/components/background/background.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { ThemeSwitchService } from '../../service/theme-switch.service';
 
 @Component({
   selector: 'app-background',
@@ -8,6 +9,10 @@ import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 })
 export class Background {
 
+  constructor(
+    private themeSwitchService: ThemeSwitchService,
+  ) {}
+
   @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
 
   // Config
@@ -90,7 +95,9 @@ export class Background {
       // Stern zeichnen mit Scroll-Parallax
       ctx.beginPath();
       ctx.arc(star.x, star.y - this.scrollY * this.parallaxFactor, star.radius, 0, Math.PI * 2);
-      ctx.fillStyle = `rgba(255, 215, 0, ${star.alpha})`; // gold
+      ctx.fillStyle = this.themeSwitchService.darkMode()
+        ? `rgba(255, 215, 0, ${star.alpha})`
+        : `rgba(184, 134, 11, ${star.alpha})`;
       ctx.fill();
     }
 

src/app/core/components/navigation-bar/navigation-bar.html

@@ -3,63 +3,18 @@
         <span class="font-semibold text-3xl">BH</span>
     </div>
     <div class="navigation grid place-items-center">
-        @if (themeSwitchService.darkMode()) {
-            <ul class="relative hidden items-center space-x-1 rounded-full border border-black/10 bg-black/5 px-1.5 py-1 backdrop-blur-md md:flex border-white/10 bg-white/10">
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80 text-white/70 hover:text-white" routerLink="/">
+        <p-card class="px-4! py-3!">
+            <ul>
+                <li class="relative list-none flex flex-row gap-3">
+                    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                         Home
                     </a>
-                    @if (isActive('/')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80 text-white/70 hover:text-white" routerLink="/about">
+                    <a routerLink="/about" routerLinkActive="active">
                         About
                     </a>
-                    @if (isActive('/about')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
                 </li>
             </ul>
-            <ng-template #activeNavItem>
-                <span class="bg-white/5 absolute inset-0 -z-5000 w-full rounded-full">
-                    <div class="bg-white absolute -top-[9px] left-1/2 h-1 w-8 -translate-x-1/2 rounded-t-full">
-                    <div class="bg-white/20 absolute -top-2 -left-2 h-6 w-12 rounded-full blur-md"></div>
-                    <div class="bg-white/20 absolute -top-1 h-6 w-8 rounded-full blur-md"></div>
-                    <div class="bg-white/20 absolute top-0 left-2 h-4 w-4 rounded-full blur-sm"></div>
-                    </div>
-                </span>
-            </ng-template>
-        } @else {
-            <ul class="relative hidden items-center space-x-1 rounded-full border border-black/10 bg-black/5 px-1.5 py-1 backdrop-blur-md md:flex">
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80" routerLink="/">
-                        Home
-                    </a>
-                    @if (isActive('/')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80" routerLink="/about">
-                        About
-                    </a>
-                    @if (isActive('/about')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-            </ul>
-            <ng-template #activeNavItem>
-                <span class="bg-black/5 absolute inset-0 -z-5000 w-full rounded-full">
-                    <div class="bg-black absolute -top-[9px] left-1/2 h-1 w-8 -translate-x-1/2 rounded-t-full">
-                    <div class="bg-black/20 absolute -top-2 -left-2 h-6 w-12 rounded-full blur-md"></div>
-                    <div class="bg-black/20 absolute -top-1 h-6 w-8 rounded-full blur-md"></div>
-                    <div class="bg-black/20 absolute top-0 left-2 h-4 w-4 rounded-full blur-sm"></div>
-                    </div>
-                </span>
-            </ng-template>
-        }
+        </p-card>
     </div>
     <div class="options flex flex-row gap-[10px]">
         @if (themeSwitchService.darkMode()) {

src/app/core/components/navigation-bar/navigation-bar.scss

@@ -15,6 +15,35 @@ nav {
             border-color: var(--surface-500);
         }
     }
+
+    .navigation ul li a {
+        display: block;
+        padding: 5px 10px;
+        position: relative;
+        color: color-mix(in srgb, var(--content-color) 80%, transparent);
+        font-family: 'JetBrains Mono', monospace;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+
+        &.active {
+            color: var(--primary-500);
+            position: relative;
+            top: -3px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                left: calc(50% - 1px);
+                transform: translate(-50%);
+                width: 50%;
+                height: .1px;
+                background: var(--primary-500);
+                border-radius: 50%;
+                bottom: 2px;
+                box-shadow: 0 -3px 10px 1px var(--primary-500);
+            }
+        }
+    }
 }
 
 .blur {

src/app/core/components/navigation-bar/navigation-bar.ts

@@ -1,14 +1,14 @@
-import { NgTemplateOutlet } from '@angular/common';
 import { Component } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faMoon } from '@fortawesome/free-solid-svg-icons';
 import { faSun } from '@fortawesome/free-solid-svg-icons';
 import { ThemeSwitchService } from '../../service/theme-switch.service';
+import { Card } from 'primeng/card';
 
 @Component({
   selector: 'app-navigation-bar',
-  imports: [FontAwesomeModule, RouterLink, NgTemplateOutlet ],
+  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, Card ],
   templateUrl: './navigation-bar.html',
   styleUrl: './navigation-bar.scss'
 })

src/styles.scss

@@ -1,5 +1,6 @@
 @use "tailwindcss";
 @import '@fontsource-variable/open-sans/wght.css';
+@import '@fontsource-variable/jetbrains-mono/wght.css';
 @import '@fortawesome/fontawesome-free/css/all.css';
 
 body {
@@ -8,5 +9,20 @@ body {
   margin: 0;
   font-size: 14px;
   overflow: auto;
-  background-color: var(--surface-0);
+  background-color: var(--primary-50);
+}
+
+html.dark body {
+  background-color: var(--surface-950);
+}
+
+p-card {
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--primary-500) 50%, transparent);
+  box-shadow: inset 0 0 10px 2px color-mix(in srgb, var(--primary-500) 20%, transparent);
+  padding: var(--card-body-padding);
+
+  .p-card-body {
+    padding: 0;
+  }
 }