77 lines
3.7 KiB
HTML
77 lines
3.7 KiB
HTML
<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">
|
|
<a routerLink="/"><img [src]="themeSwitchService.darkMode() ? 'logo/square_white.svg' : 'logo/square_black.svg'" alt="bH" width="50"></a>
|
|
</span>
|
|
</div>
|
|
<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 }">
|
|
{{ 'common.home' | translate }}
|
|
</a>
|
|
<a routerLink="/about" routerLinkActive="active">
|
|
{{ 'common.about' | translate }}
|
|
</a>
|
|
<a routerLink="/projects" routerLinkActive="active">
|
|
{{ 'common.projects' | translate }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<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"/>
|
|
</div>
|
|
} @else {
|
|
<div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToDark()">
|
|
<fa-icon [icon]="faSun"/>
|
|
</div>
|
|
}
|
|
<div class="language size-[50px]" (click)="toggleLanguage()">
|
|
{{ 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>
|
|
<hr class="h-[1px] w-[80%] bg-(--content-color) mx-auto"/>
|
|
<div class="options flex flex-row gap-[10px] items-center justify-center">
|
|
@if (themeSwitchService.darkMode()) {
|
|
<div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
|
|
<fa-icon [icon]="faMoon"/>
|
|
</div>
|
|
} @else {
|
|
<div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToDark()">
|
|
<fa-icon [icon]="faSun"/>
|
|
</div>
|
|
}
|
|
<div class="language size-[50px]" (click)="toggleLanguage()">
|
|
{{ translateService.getCurrentLang().toUpperCase() }}
|
|
</div>
|
|
</div>
|
|
</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="z-10 backdrop-blur-xl fixed top-0 left-0 w-full h-[150px] mask-b-from-70%"></div>
|