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

style(navigation): implement basic navigation bar

Browse Source
This commit is contained in:
Nico Haider
2025-08-21 04:03:53 +02:00
parent ebb45d2ea0
commit 3406450eba
16 changed files with 2319 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/app/core/components/navigation-bar/navigation-bar.html Normal file
View File

@@ -0,0 +1,73 @@
<nav class="sticky top-0 p-[30px] flex flex-row justify-between relative z-5000">
<div class="logo grid place-items-center">
<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="/">
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">
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>
}
</div>
<div class="options flex flex-row gap-[10px]">
<div class="dark-mode size-[50px]">
<fa-icon [icon]="faMoon"/>
</div>
<div class="language size-[50px]">EN</div>
</div>
</nav>
<div class="blur blur1"></div>
<div class="blur blur2"></div>