<nav class="flex items-center justify-center w-full border-b border-gray-200">
    <div class="flex flex-col w-full max-w-6xl py-10 ">
        <figure class="px-2 w-full cursor-pointer md:px-20" routerLink="/">
            <img src="assets/img/bannerNav.png" alt="">
        </figure>
        <ul class="flex w-full justify-around items-center">
            <li class="hidden lg:block text-2xl text-blue-900 font-normal cursor-pointer" [routerLink]="option.link"
                *ngFor="let option of navOptions">{{option.nombre}}</li>
        </ul>
        <button class="block mx-auto border border-gray-400 rounded-md hover:bg-gray-200 lg:hidden"
            (click)="changeStatus()">
            <svg class="w-10 h-10 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h14" />
            </svg>

        </button>
    </div>
</nav>

<div *ngIf="displayedNavbar" class="absolute w-full bg-gray-900 text-center z-10 lg:hidden">
    <ul>
        <li *ngFor="let item of navOptions" class="border-b border-gray-50 py-3 text-xl text-blue-800 cursor-pointer" (click)="changeStatus()" [routerLink]="item.link">{{item.nombre}}</li>
    </ul>
</div>