feat(core): new navigation bar design

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

@@ -5,7 +5,6 @@
         </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 }">
@@ -16,7 +15,6 @@
                 </a>
             </li>
         </ul>
-        </p-card>
     </div>
     <div class="options flex flex-row gap-[10px] items-center">
         @if (themeSwitchService.darkMode()) {

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);
         }
     }
 }

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'
 })