
<nav class="navbar">
    <div style="max-width: fit-content;">
        <img [src]="'assets/img/logoATC.png'" alt="" style="max-height: 60px;">
    </div>
    <div class="nav-center">
        <ul class="ul-links">
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" href="">Inicio</a>
            </li>
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" routerLink="/linea/habitat">Línea Hábitat</a>
                <ul *ngIf="showDropdown" class="dropdown-menu">
                    <li><a class="dropdown-option" *ngFor="let option of menu1Opciones" [routerLink]="['/linea/habitat', option.name]">{{option.name}}</a></li>
                </ul>
            </li>
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" routerLink="/linea/comercial">Línea Comercial</a>
                <ul *ngIf="showDropdown" class="dropdown-menu">
                    <li><a class="dropdown-option" *ngFor="let option of menu2Opciones" [routerLink]="['/linea/comercial', option.name]">{{option.name}}</a></li>
                </ul>
            </li>
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" routerLink="/linea/industrial">Línea Industrial</a>
                <ul *ngIf="showDropdown" class="dropdown-menu">
                    <li><a class="dropdown-option" *ngFor="let option of menu3Opciones" [routerLink]="['/linea/industrial', option.name]">{{option.name}}</a></li>
                </ul>
            </li>
            
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" routerLink="/linea/aplicacion">Por Aplicación</a>
                <ul *ngIf="showDropdown" class="dropdown-menu">
                    <li><a class="dropdown-option" *ngFor="let option of menu4Opciones" [routerLink]="['/linea/aplicacion', option.name]">{{option.name}}</a></li>
                </ul>
            </li>
            <li class="nav-links"><a class="main-option" href="">Cotización</a></li>
            <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
                <a class="main-option" href="">Portales</a>
                <ul *ngIf="showDropdown" class="dropdown-menu">
                    <li><a class="dropdown-option" *ngFor="let option of menu5Opciones">{{option.name}}</a></li>
                </ul>
            </li>
            
        </ul>
    </div>
    <div class="nav-right">
        <div class="search">
            <mat-icon>search</mat-icon>
            <input placeholder="Modelo">
        </div>
    </div>

    <div class="menu">
        <mat-icon>menu</mat-icon>
    </div>
</nav>