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

style(navigation): implement new navigation-bar

Browse Source
This commit is contained in:
Nico Haider
2025-08-22 00:46:19 +02:00
parent aebd3d643e
commit 244ad1aabe
8 changed files with 679 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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()) {