From f25e61be55c87b6a7e95c1554caea1e7b1c07f77 Mon Sep 17 00:00:00 2001
From: "nico.hdr8" <n.haider@htlstp.at>
Date: Mon, 6 Oct 2025 11:07:31 +0200
Subject: [PATCH] feat(core): new navigation bar design

---
 .../navigation-bar/navigation-bar.html        | 22 ++++++++---------
 .../navigation-bar/navigation-bar.scss        | 24 +++++++------------
 .../navigation-bar/navigation-bar.ts          |  3 +--
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index 6e3291c..779d603 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -5,18 +5,16 @@
         </span>
     </div>
     <div class="navigation grid place-items-center">
-        <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 }">
-                        {{ 'common.home' | translate }}
-                    </a>
-                    <a routerLink="/about" routerLinkActive="active">
-                        {{ 'common.about' | translate }}
-                    </a>
-                </li>
-            </ul>
-        </p-card>
+        <ul>
+            <li class="relative list-none flex flex-row gap-3">
+                <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+                    {{ 'common.home' | translate }}
+                </a>
+                <a routerLink="/about" routerLinkActive="active">
+                    {{ 'common.about' | translate }}
+                </a>
+            </li>
+        </ul>
     </div>
     <div class="options flex flex-row gap-[10px] items-center">
         @if (themeSwitchService.darkMode()) {
diff --git a/src/app/core/components/navigation-bar/navigation-bar.scss b/src/app/core/components/navigation-bar/navigation-bar.scss
index 7dd6fc2..8867817 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.scss
+++ b/src/app/core/components/navigation-bar/navigation-bar.scss
@@ -1,4 +1,6 @@
 nav {
+    background-color: rgb(from var(--content-background) r g b / 0.5);
+
     .options > div {
         display: grid;
         place-items: center;
@@ -18,30 +20,20 @@ nav {
 
     .navigation ul li a {
         display: block;
-        padding: 5px 10px;
+        padding: 7.5px 15px;
         position: relative;
-        color: color-mix(in srgb, var(--content-color) 80%, transparent);
         font-family: 'JetBrains Mono', monospace;
         letter-spacing: 2px;
         text-transform: uppercase;
+        border-radius: var(--content-border-radius);
+        border: 1px solid transparent;
+        font-size: 0.8rem;
 
         &.active {
             color: var(--primary-500);
+            background-color: rgb(from var(--primary-500) r g b / 0.05);
             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);
-            }
+            border: 1px solid var(--primary-500);
         }
     }
 }
diff --git a/src/app/core/components/navigation-bar/navigation-bar.ts b/src/app/core/components/navigation-bar/navigation-bar.ts
index b933472..783c32a 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.ts
+++ b/src/app/core/components/navigation-bar/navigation-bar.ts
@@ -4,12 +4,11 @@ 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';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-navigation-bar',
-  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, Card, TranslatePipe],
+  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, TranslatePipe],
   templateUrl: './navigation-bar.html',
   styleUrl: './navigation-bar.scss'
 })