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

@@ -1,73 +1,115 @@
 /* src/app/components/layout/layout.component.scss */
 .layout-wrapper {
-    display: flex;
+  display: flex;
-    min-height: 100vh;
+  min-height: 100vh;
-  }
+}
 
+.sidebar-wrapper {
+  flex: 0 0 250px;
+  width: 250px;
+  position: fixed;
+  height: 100vh;
+  z-index: 100;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  background-color: #0088cc;
+  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 todas las pantallas cuando el sidebar está oculto */
+.sidebar-wrapper:not(.sidebar-visible) {
+  transform: translateX(-250px);
+}
+
+.main-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f8f9fa;
+  transition: margin-left 0.3s ease;
+  margin-left: 0;
+  width: 100%;
+}
+
+/* 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 {
+  flex: 1;
+  padding: 0;
+  background-color: #f8f9fa;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #0088cc;
+  color: white;
+  padding: 0.75rem 1rem;
+  font-size: 0.8rem;
+}
+
+.footer-left, .footer-right {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ajustes para pantallas pequeñas y tablets */
+@media (max-width: 992px) {
   .sidebar-wrapper {
-    flex: 0 0 250px;
+    transform: translateX(-100%);
     width: 250px;
+    z-index: 1030; /* Z-index mayor para asegurar que esté sobre el contenido */
     position: fixed;
-    height: 100vh;
-    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;
-  }
-  
-  /* Para pantallas grandes */
-  .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;
-  }
-  
-  /* Ajustar el margen cuando el sidebar está oculto */
-  .sidebar-wrapper:not(.sidebar-visible) ~ .main-content-wrapper {
     margin-left: 0;
+    width: 100%;
   }
   
-  .page-content {
+  .sidebar-wrapper.sidebar-visible {
-    flex: 1;
+    transform: translateX(0);
-    padding: 0;
-    background-color: #f8f9fa;
   }
   
-  .footer {
+  /* Overlay para cuando el sidebar está visible en pantallas pequeñas */
-    display: flex;
+  body.sidebar-visible::before {
-    justify-content: space-between;
+    content: '';
-    background-color: #0088cc;
+    position: fixed;
-    color: white;
+    top: 0;
-    padding: 0.75rem 1rem;
+    left: 0;
-    font-size: 0.8rem;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1020;
   }
   
-  .footer-left, .footer-right {
+  .sidebar-overlay {
-    display: flex;
+    position: fixed;
-    flex-direction: column;
+    top: 0;
-  }
+    left: 0;
-  
+    right: 0;
-  /* Ajustes para tablets y móviles */
+    bottom: 0;
-  @media (max-width: 992px) {
+    z-index: 1025;
-    .sidebar-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
-      transform: translateX(-100%);
-      transition: transform 0.3s;
-    }
-    
-    .main-content-wrapper {
-      margin-left: 0;
-    }
-    
-    .sidebar-wrapper.sidebar-visible {
-      transform: translateX(0);
-    }
   }
+}

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
-      document.body.classList.toggle('sidebar-visible', this.isSidebarVisible);
+    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);
     }
   }
 }