Navbar responsive

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

@@ -113,7 +113,45 @@
   color: #252E68;
 }
 
-@media screen and (max-width: 768px) {
+
+
+.mobile-menu {
+  display: none;
+  position: absolute;
+  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;
+  max-height: 0;
+  z-index: 100;
+}
+
+.mobile-menu.active {
+  display: block;
+  max-height: 300px; 
+}
+
+.mobile-menu.active {
+  display: block;
+  max-height: 300px; 
+}
+
+
+.mobile-menu .ul-links {
+  flex-direction: column;
+  padding: 0;
+}
+
+.mobile-menu .nav-links {
+  padding: 10px 0;
+  text-align: center;
+}
+
+/* Estilo para dispositivos pequeños (teléfonos) */
+@media (max-width: 576px) {
   .nav-center {
     display: none;
   }
@@ -123,8 +161,46 @@
   }
 
   .menu {
+    cursor: pointer;
     display: block;
     transform: scale(1.5);
   }
 
+  .menu:hover{
+    background-color: lightgray;
+  }
+
+  
+  
+}
+
+
+/* Estilo para tablets */
+@media (min-width: 576px) and (max-width: 768px) {
+  .nav-center {
+    display: none;
+  }
+
+  .nav-right {
+    display: none;
+  }
+
+  .menu {
+    display: block;
+    transform: scale(1.5);
+  }
+}
+
+/* Estilo para laptops y escritorios pequeños */
+@media (min-width: 768px) and (max-width: 992px) {
+  .nav-center{
+    width: 70%;
+  }
+}
+
+/* Estilo para escritorios grandes */
+@media (min-width: 1200px) and (max-width: 1440px) {
+  .nav-center{
+    width: 60%;
+  }
 }

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

@@ -51,7 +51,35 @@
         </div>
     </div>
 
-    <div class="menu">
+    <div class="menu" (click)="toggleMenu()">
         <mat-icon>menu</mat-icon>
-    </div>
+      </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>
+          </li>
+        </ul>
+      </div>
+      
 </nav>

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

@@ -7,6 +7,7 @@ import { Router } from '@angular/router';
   styleUrl: './navbar.component.css'
 })
 export class NavbarComponent {
+  public isMenuOpen = false;
   public showDropdown = false;
   menu1Opciones: any[] = [
     { name: 'PF', link: '/home' },
@@ -83,6 +84,10 @@ export class NavbarComponent {
 
   }
 
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
   redirectHome() {
     this._router.navigate(['']);
   }