1

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 :)

abriendo menu y navegando hacia abajo

cerrando el menu

abriendo el menu otra vez

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 :)

3
  • Estas en SO en español, y el idioma oficial del sitio es el español. Por favor, traduce tu pregunta.
    – gbianchi
    el 25 feb. 2019 a las 17:45
  • Puedes intentar montar un ejemplo en StackBlitz? Algo me falla cuando intento usar tu código y no puedo reproducir el escenario el 26 feb. 2019 a las 9:23
  • Hola, @PabloLozano! Lamento las demoras. No conozco esa herramienta, pero me pondre al corriente tan pronto como sea posible :)
    – Poeta
    el 8 mar. 2019 a las 20:31

1 respuesta 1

0

Sin entrar a discutir si mejora o no la experiencia de usuario (el item seleccionado queda fuera de la vista), lo que tienes que hacer es impedir que se active el autofocus:

<mat-sidenav #start
  class="mat-elevation-z10"
  [opened]="open"
  [autofocus]="false"
  ...
>
3
  • No funcionó :'(
    – Poeta
    el 8 mar. 2019 a las 19:52
  • Estás usando una versión vieja. No funciona con [email protected]. el 9 mar. 2019 a las 11:26
  • :o entiendo, a actualizar el proyecto y probar la solución entonces :)
    – Poeta
    el 10 mar. 2019 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.