ultimo

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

@@ -114,40 +114,66 @@
 }
 
 
-
 .mobile-menu {
-  display: none;
+  display: block;
   position: absolute;
-  top: 100%; 
+  top: 100%;
   left: 0;
   width: 100%;
   background-color: white;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  transition: max-height 0.3s ease-in-out;
   overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
   max-height: 0;
   z-index: 100;
 }
 
 .mobile-menu.active {
-  display: block;
-  max-height: 300px; 
-}
-
-.mobile-menu.active {
-  display: block;
-  max-height: 300px; 
+  max-height: 100vh; 
 }
 
-
-.mobile-menu .ul-links {
-  flex-direction: column;
+.mobile-ul-links {
+  list-style: none;
   padding: 0;
+  margin: 0;
 }
 
-.mobile-menu .nav-links {
+.mobile-nav-links {
   padding: 10px 0;
   text-align: center;
+  cursor: pointer;
+}
+
+.mobile-main-option{
+  text-decoration: none;
+  color: black;
+  font-size: 17px;
+  font-family: 'Albert Sans', sans-serif;
+}
+
+.sub-menu {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  padding-left: 0; 
+  margin: 0; 
+  list-style-type: none; 
+}
+
+.sub-menu li{
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.sub-menu li a{
+  color: black;
+  text-decoration: none;
+  text-align: left;
+  -webkit-text-align: center;
+}
+
+.sub-open {
+  max-height: 300px; 
 }
 
 /* Estilo para dispositivos pequeños (teléfonos) */
@@ -194,7 +220,7 @@
 /* Estilo para laptops y escritorios pequeños */
 @media (min-width: 768px) and (max-width: 992px) {
   .nav-center{
-    width: 70%;
+    width: 60%;
   }
 }
 

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

@@ -1,85 +1,119 @@
-
 <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" routerLink="/cotizacion">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>
-            
+  <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" routerLink="/cotizacion">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 class="nav-right">
-        <div class="search">
-            <mat-icon>search</mat-icon>
-            <input placeholder="Modelo">
-        </div>
-    </div>
+  </div>
 
-    <div class="menu" (click)="toggleMenu()">
-        <mat-icon>menu</mat-icon>
-      </div>
-      
-      <!-- Agregamos una clase condicional para el despliegue del menú -->
-      <div [ngClass]="{'active': isMenuOpen}" class="mobile-menu">
-        <ul class="ul-links">
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" href="">Inicio</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" routerLink="/linea/habitat">Línea Hábitat</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" routerLink="/linea/comercial">Línea Comercial</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" routerLink="/linea/industrial">Línea Industrial</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" routerLink="/linea/aplicacion">Por Aplicación</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" routerLink="/cotizacion">Cotización</a>
-          </li>
-          <li class="nav-links" (click)="toggleMenu()">
-            <a class="main-option" href="">Portales</a>
+  <div class="menu" (click)="toggleMenu()">
+    <mat-icon>menu</mat-icon>
+  </div>
+
+  <!-- Agregamos una clase condicional para el despliegue del menú -->
+  <div [ngClass]="{'active': isMenuOpen}" class="mobile-menu">
+    <ul class="mobile-ul-links">
+      <li class="mobile-nav-links" (click)="toggleMenu()">
+        <a class="mobile-main-option" routerLink="">Inicio</a>
+      </li>
+
+      <li class="mobile-nav-links">
+        <a class="mobile-main-option" routerLink="/linea/habitat">Línea Hábitat</a>
+        <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]">{{option.name}}</a>
           </li>
         </ul>
-      </div>
-      
+      </li>
+
+      <li class="mobile-nav-links">
+        <a class="mobile-main-option" routerLink="/linea/comercial">Línea Comercial</a>
+        <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]">{{option.name}}</a></li>
+        </ul>
+      </li>
+
+      <li class="mobile-nav-links">
+        <a class="mobile-main-option" routerLink="/linea/industrial">Línea Industrial</a>
+        <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]">{{option.name}}</a></li>
+        </ul>
+      </li>
+
+      <li class="mobile-nav-links">
+        <a class="mobile-main-option">Por Aplicación</a>
+        <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>{{option.name}}</a></li>
+        </ul>
+      </li>
+
+      <li class="mobile-nav-links" (click)="toggleMenu()">
+        <a class="mobile-main-option" routerLink="/cotizacion">Cotización</a>
+      </li>
+
+      <li class="mobile-nav-links">
+        <a class="mobile-main-option">Portales</a>
+        <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]">{{option.name}}</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+
+
 </nav>

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

@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 })
 export class NavbarComponent {
   public isMenuOpen = false;
+  openSubMenu: string | null = null;
   public showDropdown = false;
   menu1Opciones: any[] = [
     { name: 'PF', link: '/home' },
@@ -88,6 +89,9 @@ export class NavbarComponent {
     this.isMenuOpen = !this.isMenuOpen;
   }
 
+  toggleSubMenu(menu: string) {
+    this.openSubMenu = this.openSubMenu === menu ? null : menu;
+  }
   redirectHome() {
     this._router.navigate(['']);
   }