<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="blur blur1"></div>
<div class="blur blur2"></div>
