Soy relativamente nuevo en Angular. Estoy implementando en mi proyecto el ejemplo de sidenav de kenji 1996. link de su repositorio.
Muchos de los comportamientos del menú de la barra lateral son lo que necesito, sin embargo, tengo un problema con la barra de desplazamiento cuando lo intento para un entorno móvil. Cuando oculta el menú y lo muestra de nuevo, la barra de desplazamiento del menú no mantiene la posición en la que se encuentra, pero se "reinicia" y vuelve a subir. Sé que puede parecer un pequeño detalle, pero creo firmemente que la experiencia del usuario se basa en eso, en corregir esos pequeños detalles y brindar comodidad al usuario.
Las siguientes imagenes describen mejor el problema :)
He revisado la documentación de Angular y Angular-Material, pero no he encontrado una solución respectiva, o tal vez no la he entendido bien. :(
Componente.html:
<mat-toolbar color="primary" class="main-nav mat-elevation-z4">
<button mat-icon-button (click)="start.toggle()" class="icon-padding">
<mat-icon aria-hidden="true">menu</mat-icon>
</button>
<button mat-button routerLink="/"><strong>Prueba Menu Sidenav</strong></button>
<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<button mat-icon-button class="icon-padding">
<mat-icon aria-hidden="true">notifications</mat-icon>
</button>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav class="mat-elevation-z10" #start [opened]="open" fixedTopGap="64" [mode]="mode" fixedInViewport="true" style="width:240px;">
<mat-list dense>
<ng-container *ngFor="let nav of navList">
<mat-expansion-panel class="mat-elevation-z0" hideToggle="true" [expanded]="nav.dropDown">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon mat-list-icon>{{nav.icon}}</mat-icon>
<span class="nav-list-item" style="margin-left: 10px;">{{nav.categoryName}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list>
<div style="margin-top: -20px;">
<ng-container *ngFor="let subCategory of nav.subCategory">
<ng-container *ngIf="subCategory.visable"> <!--Sub category list-->
<mat-list-item (click)="mode === 'over'? start.close() : null" routerLinkActive="mat-icon-active" style="margin-left: -70px;margin-right: -24px;">
<a mat-list-item [routerLink]="subCategory.subCategoryLink" mat-line style="margin-left: 30px;">
<mat-icon class="sidenav-icon" style="margin-left: 18px;">{{subCategory.subCategoryQuery}}</mat-icon>
<span style="margin-left: 3px;">{{subCategory.subCategoryName}}</span>
</a>
</mat-list-item>
</ng-container>
</ng-container>
</div>
</mat-nav-list>
</mat-expansion-panel>
</ng-container>
</mat-list>
</mat-sidenav>
<mat-sidenav-content style="margin-top:64px;">
<div style="margin: 10px;">
<router-outlet></router-outlet>
</div>
<div style="height: 64px;"></div>
</mat-sidenav-content>
</mat-sidenav-container>
Componente.ts
import {Component, NgZone, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
// Sidenav responsive
width;
height;
mode = 'side';
open = 'true';
title = 'Responsive Sidenav Starter';
navList: NavList[];
constructor(public ngZone: NgZone,
public route: Router, ) {
this.navList = [
{ categoryName: 'Menu', icon: 'face', dropDown: true,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'face', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'question_answer', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'work', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
];
this.changeMode();
window.onresize = (e) => {
ngZone.run(() => {
this.changeMode();
});
};
}
ngOnInit() {
}
changeMode() {
this.width = window.innerWidth;
this.height = window.innerHeight;
if (this.width <= 800) {
this.mode = 'over';
this.open = 'false';
}
if (this.width > 800) {
this.mode = 'side';
this.open = 'true';
}
}
}
export class NavList {
categoryName: string;
icon: string;
dropDown: boolean;
subCategory: NavListItem[];
constructor(_categoryName: string, _icon: string, _dropDown: boolean, _subCategory: NavListItem[]) {
this.categoryName = _categoryName;
this.icon = _icon;
this.dropDown = _dropDown;
this.subCategory = _subCategory;
}
}
export class NavListItem {
subCategoryName: string;
subCategoryLink: string;
subCategoryQuery?: any;
visable: boolean;
}
Componente.scss
// angular material colors
@import '../../../theme';
.sidenav-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.main-nav {
position: fixed;
top: 0px;
left: 0;
width: 100% !important;
z-index: 5;
}
.icon-padding {
margin-left: 3px;
margin-right: 3px;
}
.nav-list-exp {
padding: 0 !important;
}
.nav-list-item {
background-color: #FFF;
transition: background 0.2s linear;
}
.mat-icon-active mat-icon {
transition: color 0.2s linear;
color: mat-color($primary) !important;
}
.nav-category-open {
transition: color 0.2s linear;
color: mat-color($primary) !important;
}
.nav-list-item:hover {
cursor: pointer;
background:#c5c5c5;
}
.nav-list-item-text {
padding-left: 18px;
font-size: 0.8em;
}
.nav-list-icon {
margin-left: 5px;
}
mat-toolbar {
height: 64px !important;
min-height: 64px !important;
mat-toolbar-row {
height: 64px !important;
}
}
De antemano muchas gracias por la ayuda :)