estilos

src/app/components/layout/layout.component.html

@@ -1,11 +1,14 @@
 <div class="layout-wrapper">
+  <!-- Overlay para cerrar el sidebar al hacer clic fuera (solo en móviles) -->
+  <div *ngIf="isSidebarVisible && window.innerWidth <= 992" class="sidebar-overlay" (click)="toggleSidebar()"></div>
+  
   <!-- Fixed sidebar -->
   <div class="sidebar-wrapper" [ngClass]="{'sidebar-visible': isSidebarVisible}">
     <app-sidebar></app-sidebar>
   </div>
 
   <!-- Main content area -->
-  <div class="main-content-wrapper" [ngStyle]="{'margin-left': isSidebarVisible ? '250px' : '0'}">
+  <div class="main-content-wrapper" [ngClass]="{'with-sidebar': isSidebarVisible && window.innerWidth > 992}">
     <!-- Top navbar -->
     <app-navbar (sidebarToggle)="toggleSidebar()"></app-navbar>
 

src/app/components/layout/layout.component.scss

@@ -12,28 +12,45 @@
   z-index: 100;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   background-color: #0088cc;
-    transition: transform 0.3s ease, width 0.3s ease;
+  transition: transform 0.3s ease;
+  
+  @media (max-width: 768px) {
+    /* En pantallas pequeñas, asegurarse que esté fuera de la vista cuando no es visible */
+    &:not(.sidebar-visible) {
+      transform: translateX(-100%);
+      width: 0;
+    }
+  }
 }
 
-  /* Para pantallas grandes */
+/* Para todas las pantallas cuando el sidebar está oculto */
 .sidebar-wrapper:not(.sidebar-visible) {
   transform: translateX(-250px);
-    width: 0;
 }
 
 .main-content-wrapper {
   flex: 1;
-    margin-left: 250px;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-color: #f8f9fa;
   transition: margin-left 0.3s ease;
+  margin-left: 0;
+  width: 100%;
 }
 
-  /* Ajustar el margen cuando el sidebar está oculto */
+/* Solo en pantallas grandes (>992px) ajustar el margen cuando el sidebar está visible */
+@media (min-width: 993px) {
+  .main-content-wrapper.with-sidebar {
+    margin-left: 250px;
+    width: calc(100% - 250px);
+  }
+}
+
+/* Cuando el sidebar está oculto, ajustar el margen */
 .sidebar-wrapper:not(.sidebar-visible) ~ .main-content-wrapper {
   margin-left: 0;
+  width: 100%;
 }
 
 .page-content {
@@ -56,18 +73,43 @@
   flex-direction: column;
 }
 
-  /* Ajustes para tablets y móviles */
+/* Ajustes para pantallas pequeñas y tablets */
 @media (max-width: 992px) {
   .sidebar-wrapper {
     transform: translateX(-100%);
-      transition: transform 0.3s;
+    width: 250px;
+    z-index: 1030; /* Z-index mayor para asegurar que esté sobre el contenido */
+    position: fixed;
   }
   
   .main-content-wrapper {
     margin-left: 0;
+    width: 100%;
   }
   
   .sidebar-wrapper.sidebar-visible {
     transform: translateX(0);
   }
+  
+  /* Overlay para cuando el sidebar está visible en pantallas pequeñas */
+  body.sidebar-visible::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1020;
+  }
+  
+  .sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1025;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 }

src/app/components/layout/layout.component.ts

@@ -1,10 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 
-
 @Component({
   selector: 'app-layout',
   imports: [
@@ -17,16 +16,43 @@ import { SidebarComponent } from '../sidebar/sidebar.component';
   styleUrl: './layout.component.scss',
   standalone: true,
 })
-export class LayoutComponent {
+export class LayoutComponent implements OnInit {
   isSidebarVisible: boolean = true;
-  toggleSidebar() {
+  window = window; // Exposición de window para su uso en el template
-    console.log('Toggling sidebar, current state:', this.isSidebarVisible);
+  private readonly MOBILE_BREAKPOINT = 420; // Breakpoint para ocultar sidebar automáticamente
-    this.isSidebarVisible = !this.isSidebarVisible;
-    console.log('New sidebar state:', this.isSidebarVisible);
 
-    // Aplicar clase al body solo para móviles
+  ngOnInit() {
-    if (window.innerWidth <= 992) {
+    // Comprobar el ancho inicial y ajustar el sidebar
+    this.checkScreenSize();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.checkScreenSize();
+  }
+
+  private checkScreenSize() {
+    // Si la pantalla es menor a 420px, ocultar el sidebar automáticamente
+    if (window.innerWidth < this.MOBILE_BREAKPOINT) {
+      this.isSidebarVisible = false;
+    } else if (window.innerWidth >= 992) {
+      // En pantallas grandes, mostrar el sidebar por defecto
+      this.isSidebarVisible = true;
+    }
+    // Entre 420px y 992px mantener el estado actual (toggle manual)
+  }
+
+  toggleSidebar() {
+    this.isSidebarVisible = !this.isSidebarVisible;
+    
+    // Aplicar clase al body para todas las resoluciones
     document.body.classList.toggle('sidebar-visible', this.isSidebarVisible);
+    
+    // Si cerramos el sidebar en resolución pequeña, forzar que el contenido no tenga margen
+    if (!this.isSidebarVisible && window.innerWidth <= 992) {
+      setTimeout(() => {
+        document.querySelector('.main-content-wrapper')?.classList.remove('with-sidebar');
+      }, 10);
     }
   }
 }