nico/byhaider-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(navigation-bar): make navbar responsive

Browse Source
This commit is contained in:
nico.hdr8
2025-10-07 11:56:18 +02:00
parent ba5b2694a3
commit 5138bd3b58
3 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/core/components/navigation-bar/navigation-bar.html
View File

@@ -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>