estilos
This commit is contained in:
parent
66709ca828
commit
91543de1dd
@ -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>
|
||||
|
||||
|
||||
@ -1,73 +1,115 @@
|
||||
/* src/app/components/layout/layout.component.scss */
|
||||
.layout-wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
display: flex;
|
||||
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 {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
background-color: #f8f9fa;
|
||||
.sidebar-wrapper.sidebar-visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #0088cc;
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.footer-left, .footer-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1025;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Ajustes para tablets y móviles */
|
||||
@media (max-width: 992px) {
|
||||
.sidebar-wrapper {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper.sidebar-visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
window = window; // Exposición de window para su uso en el template
|
||||
private readonly MOBILE_BREAKPOINT = 420; // Breakpoint para ocultar sidebar automáticamente
|
||||
|
||||
ngOnInit() {
|
||||
// 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() {
|
||||
console.log('Toggling sidebar, current state:', this.isSidebarVisible);
|
||||
this.isSidebarVisible = !this.isSidebarVisible;
|
||||
console.log('New sidebar state:', this.isSidebarVisible);
|
||||
|
||||
// Aplicar clase al body solo para móviles
|
||||
if (window.innerWidth <= 992) {
|
||||
document.body.classList.toggle('sidebar-visible', 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user