<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">
            <img [src]="themeSwitchService.darkMode() ? 'logo/square_white.svg' : 'logo/square_black.svg'" alt="bH" width="50">
        </span>
    </div>
    <div class="navigation grid place-items-center">
        <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 flex-row gap-[10px] items-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>
</nav>

<div class="blur blur1"></div>
<div class="blur blur2"></div>
