style(navigation-bar): make navbar responsive

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

@@ -1,10 +1,10 @@
-<nav class="sticky top-0 p-[30px] flex flex-row justify-between relative z-5000">
+<nav class="sticky top-0 p-[30px] flex flex-row justify-between relative z-30">
     <div class="logo grid place-items-center">
         <span class="font-semibold text-3xl">
-            <img [src]="themeSwitchService.darkMode() ? 'logo/square_white.svg' : 'logo/square_black.svg'" alt="bH" width="50">
+            <a routerLink="/"><img [src]="themeSwitchService.darkMode() ? 'logo/square_white.svg' : 'logo/square_black.svg'" alt="bH" width="50"></a>
         </span>
     </div>
-    <div class="navigation grid place-items-center">
+    <div class="navigation place-items-center hidden md:grid">
         <ul>
             <li class="relative list-none flex flex-row gap-3">
                 <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
@@ -19,7 +19,7 @@
             </li>
         </ul>
     </div>
-    <div class="options flex flex-row gap-[10px] items-center">
+    <div class="options flex-row gap-[10px] items-center hidden md:flex">
         @if (themeSwitchService.darkMode()) {
             <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
                 <fa-icon [icon]="faMoon"/>
@@ -33,7 +33,29 @@
             {{ translateService.getCurrentLang().toUpperCase() }}
         </div>
     </div>
+    <p-button icon="fa-solid fa-bars" outlined (click)="showMobileMenu.set(true)" class="block md:hidden"/>
 </nav>
 
+@if (showMobileMenu()) {
+    <div class="mobile-menu block md:hidden w-full h-full fixed top-0 left-0 z-50">
+        <p-button icon="fa-solid fa-x" outlined (click)="showMobileMenu.set(false)" class="absolute top-8 right-8"/>
+
+        <ul class="h-full p-[100px]">
+            <li class="h-full relative list-none flex flex-col gap-3 align-center justify-center text-center">
+                <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="showMobileMenu.set(false)">
+                    {{ 'common.home' | translate }}
+                </a>
+                <a routerLink="/about" routerLinkActive="active" (click)="showMobileMenu.set(false)">
+                    {{ 'common.about' | translate }}
+                </a>
+                <a routerLink="/projects" routerLinkActive="active" (click)="showMobileMenu.set(false)">
+                    {{ 'common.projects' | translate }}
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="block md:hidden w-full h-full fixed top-0 left-0 z-40 backdrop-blur-md"></div>
+}
+
 <div class="blur blur1"></div>
 <div class="blur blur2"></div>

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

@@ -15,27 +15,32 @@ nav {
             border-color: var(--content-border-color);
         }
     }
+}
 
-    .navigation ul li a {
+ul li a {
-        display: block;
+    display: block;
-        padding: 7.5px 15px;
+    padding: 7.5px 15px;
+    position: relative;
+    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;
-        font-family: 'JetBrains Mono', monospace;
+        border: 1px solid var(--primary-500);
-        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;
-            border: 1px solid var(--primary-500);
-        }
     }
 }
 
+.mobile-menu ul li a {
+    font-size: 1.3rem;
+    padding: 15px 30px;
+}
+
 .blur {
     position: fixed;
     top: 0;
@@ -57,4 +62,8 @@ nav {
     backdrop-filter: blur(5px);
     mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
     -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
+}
+
+.blurred {
+    backdrop-filter: blur(5px);
 }

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

@@ -1,14 +1,15 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 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 { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ButtonModule } from "primeng/button";
 
 @Component({
   selector: 'app-navigation-bar',
-  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, TranslatePipe],
+  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, TranslatePipe, ButtonModule],
   templateUrl: './navigation-bar.html',
   styleUrl: './navigation-bar.scss'
 })
@@ -18,6 +19,8 @@ export class NavigationBar {
   protected themeSwitchService = inject(ThemeSwitchService);
   protected translateService = inject(TranslateService);
 
+  showMobileMenu = signal(false);
+
   constructor() {}
 
   isActive(route: string): boolean {