Nuevo estilo de navbar

src/app/shared/navbar/navbar.component.css

@@ -32,9 +32,13 @@
   font-family: 'Albert Sans', sans-serif;
   font-weight: 500;
 }
+.main-option {
+  border-bottom: 2px solid transparent; 
+  transition: border-bottom 0.3s;
+}
 
-.main-option:hover {
-  border-bottom: 2px solid #252E68;
+.main-option.hovered {
+  border-bottom: 2px solid #252E68; 
 }
 
 
@@ -50,9 +54,9 @@
   top: 145%;
   left: 50%;
   transform: translateX(-50%);
-  text-align: center;
+  
   background-color: #fff;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -70,10 +74,12 @@
 
 
 .dropdown-option {
+  position: relative;
   text-decoration: none;
   color: black;
   padding: 5px 20px;
-  display: block;
+  display: flex;
+  justify-content: space-between;
   font-size: 17px;
   font-family: 'Albert Sans', sans-serif;
 }
@@ -176,6 +182,52 @@
   max-height: 300px; 
 }
 
+
+.submenu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: none;
+  background-color: white;
+  color: black;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  min-height: 100%;
+}
+
+.submenu-li {
+  cursor: pointer;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 5px;
+  text-align: center;
+  font-size: 17px;
+  font-family: 'Albert Sans', sans-serif;
+  min-height: 25px;
+  width: auto;
+  min-width: 120px;
+  white-space: nowrap;
+}
+
+.submenu-li:hover{
+  background-color: #252e68b7;
+  color: white;
+} 
+
+
+.dropdown-option > .submenu {
+  left: 100%;
+  top: 0;
+}
+
+
+.dropdown-option:hover .submenu {
+  display: block;
+}
+
+
 /* Estilo para dispositivos pequeños (teléfonos) */
 @media (max-width: 576px) {
   .nav-center {

src/app/shared/navbar/navbar.component.html

@@ -9,30 +9,93 @@
       <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>
+
+
+
+      <li class="nav-links" (mouseenter)="showDropdowns('lineaHabitat', true)"
+        (mouseleave)="showDropdowns('lineaHabitat', false)">
+        <a class="main-option" routerLink="/linea/habitat" [ngClass]="{'hovered': currentDropdown['lineaHabitat']}">
+          Línea Hábitat
+        </a>
+
+        <ul *ngIf="currentDropdown['lineaHabitat']" class="dropdown-menu">
+          <li class="dropdown-option" *ngFor="let categoria of lineaHabitatCategorias"
+            (mouseenter)="currentDropdown['lineaHabitat'] = true"
+            (mouseleave)="currentDropdown['lineaHabitat'] = false">
+
+            {{ categoria.categoria }}
+            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>
+
+            <ul class="submenu">
+              <li class="submenu-li" *ngFor="let producto of categoria.productos"
+                (mouseenter)="currentDropdown['lineaHabitat'] = true"
+                (mouseleave)="currentDropdown['lineaHabitat'] = false">
+                {{ producto.name }}
+              </li>
+            </ul>
+          </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>
+
+      <li class="nav-links" (mouseenter)="showDropdowns('lineaComercial', true)"
+        (mouseleave)="showDropdowns('lineaComercial', false)">
+        <a class="main-option" routerLink="/linea/comercial" [ngClass]="{'hovered': currentDropdown['lineaComercial']}">
+          Línea Comercial
+        </a>
+
+        <ul *ngIf="currentDropdown['lineaComercial']" class="dropdown-menu">
+          <li class="dropdown-option" *ngFor="let categoria of lineaHabitatComercial"
+            (mouseenter)="currentDropdown['lineaComercial'] = true"
+            (mouseleave)="currentDropdown['lineaComercial'] = false">
+
+            {{ categoria.categoria }}
+            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>
+
+            <ul class="submenu">
+              <li class="submenu-li" *ngFor="let producto of categoria.productos"
+                (mouseenter)="currentDropdown['lineaComercial'] = true"
+                (mouseleave)="currentDropdown['lineaComercial'] = false">
+                {{ producto.name }}
+              </li>
+            </ul>
+          </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>
+
+
+      <li class="nav-links" (mouseenter)="showDropdowns('lineaIndustrial', true)"
+        (mouseleave)="showDropdowns('lineaIndustrial', false)">
+        <a class="main-option" routerLink="/linea/comercial"
+          [ngClass]="{'hovered': currentDropdown['lineaIndustrial']}">
+          Línea Industrial
+        </a>
+
+        <ul *ngIf="currentDropdown['lineaIndustrial']" class="dropdown-menu">
+          <li class="dropdown-option" *ngFor="let categoria of lineaHabitatIndustrial"
+            (mouseenter)="currentDropdown['lineaIndustrial'] = true"
+            (mouseleave)="currentDropdown['lineaIndustrial'] = false">
+
+            {{ categoria.categoria }}
+            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>
+
+            <ul class="submenu">
+              <li class="submenu-li" *ngFor="let producto of categoria.productos"
+                (mouseenter)="currentDropdown['lineaIndustrial'] = true"
+                (mouseleave)="currentDropdown['lineaIndustrial'] = false">
+                {{ producto.name }}
+              </li>
+            </ul>
+          </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 class="nav-links" (mouseenter)="showDropdowns('aplicacion', true)"
+        (mouseleave)="showDropdowns('aplicacion', false)">
+        <a class="main-option" routerLink="/linea/aplicacion" [ngClass]="{'hovered': currentDropdown['aplicacion']}">Por
+          Aplicación</a>
+        <ul *ngIf="currentDropdown['aplicacion']" class="dropdown-menu">
           <li><a class="dropdown-option" *ngFor="let option of menu4Opciones"
               [routerLink]="['/linea/aplicacion', option.name]">{{option.name}}</a></li>
         </ul>
@@ -66,48 +129,57 @@
       <li class="mobile-nav-links" (click)="toggleMenu()">
         <a class="mobile-main-option" routerLink="" (click)="closeMenu()">Inicio</a>
       </li>
-  
+
       <li class="mobile-nav-links">
         <a class="mobile-main-option" routerLink="/linea/habitat" (click)="closeMenu()">Línea Hábitat</a>
-        <mat-icon style="vertical-align: middle;  transform: scale(1.3);" (click)="toggleSubMenu('habitat')">keyboard_arrow_down</mat-icon>
+        <mat-icon style="vertical-align: middle;  transform: scale(1.3);"
+          (click)="toggleSubMenu('habitat')">keyboard_arrow_down</mat-icon>
         <ul [ngClass]="{'sub-open': openSubMenu === 'habitat'}" class="sub-menu">
-          <li *ngFor="let option of menu1Opciones"><a [routerLink]="['/linea/habitat', option.name]" (click)="closeMenu()">{{option.name}}</a></li>
+          <li *ngFor="let option of menu1Opciones"><a [routerLink]="['/linea/habitat', option.name]"
+              (click)="closeMenu()">{{option.name}}</a></li>
         </ul>
       </li>
-  
+
       <li class="mobile-nav-links">
         <a class="mobile-main-option" routerLink="/linea/comercial" (click)="closeMenu()">Línea Comercial</a>
-        <mat-icon style="vertical-align: middle;  transform: scale(1.3);" (click)="toggleSubMenu('comercial')">keyboard_arrow_down</mat-icon>
+        <mat-icon style="vertical-align: middle;  transform: scale(1.3);"
+          (click)="toggleSubMenu('comercial')">keyboard_arrow_down</mat-icon>
         <ul [ngClass]="{'sub-open': openSubMenu === 'comercial'}" class="sub-menu">
-          <li *ngFor="let option of menu2Opciones"><a [routerLink]="['/linea/comercial', option.name]" (click)="closeMenu()">{{option.name}}</a></li>
+          <li *ngFor="let option of menu2Opciones"><a [routerLink]="['/linea/comercial', option.name]"
+              (click)="closeMenu()">{{option.name}}</a></li>
         </ul>
       </li>
-  
+
       <li class="mobile-nav-links">
         <a class="mobile-main-option" routerLink="/linea/industrial" (click)="closeMenu()">Línea Industrial</a>
-        <mat-icon style="vertical-align: middle;  transform: scale(1.3);" (click)="toggleSubMenu('industrial')">keyboard_arrow_down</mat-icon>
+        <mat-icon style="vertical-align: middle;  transform: scale(1.3);"
+          (click)="toggleSubMenu('industrial')">keyboard_arrow_down</mat-icon>
         <ul [ngClass]="{'sub-open': openSubMenu === 'industrial'}" class="sub-menu">
-          <li *ngFor="let option of menu3Opciones"><a [routerLink]="['/linea/industrial', option.name]" (click)="closeMenu()">{{option.name}}</a></li>
+          <li *ngFor="let option of menu3Opciones"><a [routerLink]="['/linea/industrial', option.name]"
+              (click)="closeMenu()">{{option.name}}</a></li>
         </ul>
       </li>
-  
+
       <li class="mobile-nav-links">
         <a class="mobile-main-option" (click)="closeMenu()">Por Aplicación</a>
-        <mat-icon style="vertical-align: middle;  transform: scale(1.3);" (click)="toggleSubMenu('apliacion')">keyboard_arrow_down</mat-icon>
+        <mat-icon style="vertical-align: middle;  transform: scale(1.3);"
+          (click)="toggleSubMenu('apliacion')">keyboard_arrow_down</mat-icon>
         <ul [ngClass]="{'sub-open': openSubMenu === 'apliacion'}" class="sub-menu">
           <li *ngFor="let option of menu4Opciones"><a (click)="closeMenu()">{{option.name}}</a></li>
         </ul>
       </li>
-  
+
       <li class="mobile-nav-links" (click)="toggleMenu()">
         <a class="mobile-main-option" routerLink="/cotizacion" (click)="closeMenu()">Cotización</a>
       </li>
-  
+
       <li class="mobile-nav-links">
         <a class="mobile-main-option" (click)="redirectPage(); closeMenu()">Portales</a>
-        <mat-icon style="vertical-align: middle;  transform: scale(1.3);" (click)="toggleSubMenu('portales')">keyboard_arrow_down</mat-icon>
+        <mat-icon style="vertical-align: middle;  transform: scale(1.3);"
+          (click)="toggleSubMenu('portales')">keyboard_arrow_down</mat-icon>
         <ul [ngClass]="{'sub-open': openSubMenu === 'portales'}" class="sub-menu">
-          <li *ngFor="let option of menu5Opciones"><a [routerLink]="['/linea/comercial', option.name]" (click)="closeMenu()">{{option.name}}</a></li>
+          <li *ngFor="let option of menu5Opciones"><a [routerLink]="['/linea/comercial', option.name]"
+              (click)="closeMenu()">{{option.name}}</a></li>
         </ul>
       </li>
     </ul>

src/app/shared/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 
 @Component({
@@ -6,17 +7,194 @@ import { Router } from '@angular/router';
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.css'
 })
-export class NavbarComponent implements OnInit, OnDestroy  {
+export class NavbarComponent implements OnInit, OnDestroy {
   public isMenuOpen = false;
   openSubMenu: string | null = null;
   public showDropdown = false;
+  public showProducts = false;
+  public isHoveringOnDropdown = false;
+  currentDropdown: { [key: string]: boolean } = {};
   menu1Opciones: any[] = [
     { name: 'PF', link: '/home' },
     { name: 'AB', link: '/about' },
     { name: 'OV', link: '/contact' },
 
   ];
-  public menu2Opciones:any = [
+
+  lineaHabitatCategorias: any[] = [
+    {
+      categoria: "Extractor para Plafón",
+      productos: [
+        {name: "PF"}
+      ]
+    },
+    {
+      categoria: "Extractores en Línea",
+      productos: [
+        {name: "AB"},
+        {name: "OB"}
+      ]
+    }
+  ]
+
+  lineaHabitatComercial: any[] = [
+    {
+      categoria: "Extractor de Pared",
+      productos: [
+        {name: "WAD"},
+        {name: "SW"},
+        {name: "SW-XP"},
+      ]
+    },
+    {
+      categoria: "Agropecuaria",
+      productos: [
+        {name: "AGF"},
+        {name: "AGH"},
+      ]
+    },
+    {
+      categoria: "Extractor Tubo Axial",
+      productos: [
+        {name: "TAB"},
+        {name: "TAD"},
+      ]
+    },
+    {
+      categoria: "Recirculadores de Aire",
+      productos: [
+        {name: "TAP"},
+        {name: "AT"},
+        {name: "TC"},
+      ]
+    },
+    {
+      categoria: "Extractor Eólico",
+      productos: [
+        {name: "BK"},
+      ]
+    },
+    {
+      categoria: "Extractor Axiales de Techo",
+      productos: [
+        {name: "REF"},
+      ]
+    },
+    {
+      categoria: "Centrifugo de Techo",
+      productos: [
+        {name: "GDD"},
+        {name: "GDB"},
+      ]
+    },
+    {
+      categoria: "Centrifugo de Pared",
+      productos: [
+        {name: "GUD/GWD"},
+        {name: "GUB/GWB"},
+      ]
+    },
+    {
+      categoria: "Centrifugos Directos",
+      productos: [
+        {name: "CFD"},
+      ]
+    },
+  ]
+
+  lineaHabitatIndustrial: any[] = [
+    {
+      categoria: "Extractor de Pared",
+      productos: [
+        {name: "WAB"},
+        {name: "ZHP"}
+      ]
+    },
+    {
+      categoria: "Cajas de Filtración",
+      productos: [
+        {name: "MF"},
+      ]
+    },
+    {
+      categoria: "Extractor Axial de Pared",
+      productos: [
+        {name: "XWP"},
+        {name: "XWA"},
+      ]
+    },
+    {
+      categoria: "Recirculadores de Aire",
+      productos: [
+        {name: "TC"},
+      ]
+    },
+    {
+      categoria: "Extractor Tubo Axial",
+      productos: [
+        {name: "XTP"},
+        {name: "XTA"},
+        {name: "XDP"},
+        {name: "XDA"},
+        {name: "TWA"},
+        {name: "TWP"},
+        {name: "TWP/A"},
+      ]
+    },
+    {
+      categoria: "Extractor Axial de Techo",
+      productos: [
+        {name: "RHD"},
+        {name: "RHB"},
+      ]
+    },
+    {
+      categoria: "Centrifugos Directos",
+      productos: [
+        {name: "PB"},
+        {name: "PX"},
+        {name: "CBI"},
+      ]
+    },
+    {
+      categoria: "Centrifugos para Plenum",
+      productos: [
+        {name: "UFP"},
+        {name: "DI"},
+        {name: "DIT"},
+      ]
+    },
+    {
+      categoria: "Cortinas de Aire",
+      productos: [
+        {name: "CORIN"},
+      ]
+    },
+    {
+      categoria: "Accesorios Axiales de Pared",
+      productos: [
+        {name: "PER"},
+        {name: "C"},
+        {name: "M"},
+        {name: "U"},
+      ]
+    },
+    {
+      categoria: "Filtros",
+      productos: [
+        {name: "WFM"},
+        {name: "PPF-M7"},
+        {name: "PPF-M8"},
+        {name: "CAF"},
+        {name: "SFP"},
+        {name: "GBF"},
+        {name: "PAF"},
+      ]
+    },
+  ]
+
+
+  public menu2Opciones: any = [
     { name: 'AGF', link: '/home' },
     { name: 'AGH', link: '/about' },
     { name: 'AT', link: '/contact' },
@@ -36,7 +214,7 @@ export class NavbarComponent implements OnInit, OnDestroy  {
     { name: 'WAB', link: '/contact' },
     { name: 'WAD', link: '/contact' },
   ];
-  public menu3Opciones:any = [
+  public menu3Opciones: any = [
     { name: 'C', link: '/contact' },
     { name: 'CAF', link: '/contact' },
     { name: 'CBI', link: '/about' },
@@ -70,7 +248,7 @@ export class NavbarComponent implements OnInit, OnDestroy  {
     { name: 'XWP', link: '/contact' },
     { name: 'ZHP', link: '/contact' },
   ];
-  
+
   public menu4Opciones: any[] = [
     { name: 'Plantas industriales, almacenes y bodegas', link: '/home' },
     { name: 'Campanas de extracción de cocinas', link: '/about' },
@@ -95,7 +273,7 @@ export class NavbarComponent implements OnInit, OnDestroy  {
 
   ];
   public resizeSubscription: any;
-
+  public timedOutCloser: any;
   constructor(
     private _router: Router
   ) {
@@ -105,11 +283,16 @@ export class NavbarComponent implements OnInit, OnDestroy  {
   ngOnInit(): void {
     this.resizeSubscription = window.addEventListener('resize', () => {
       if (window.innerWidth >= 768) {
-        this.isMenuOpen = false; 
+        this.isMenuOpen = false;
       }
     });
   }
 
+  showDropdowns(menu: string, isOpen: boolean) {
+    this.currentDropdown[menu] = isOpen;
+  }
+
+
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }