I use in my app the Material Sidebar and navigate with the router. Basically it looks like

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="openCollapsed()"
        [opened]="!isMobile"
        [fixedInViewport]="!isMobile"
        [fixedTopGap]="64"
        [fixedBottomGap]="40"
        [mode]="isMobile ? 'over' : 'side'"
    >
    <mat-nav-list>
      <a
        *ngFor="let route of routes"
        mat-list-item
        (click)="selectNavItem(route.path)"
      >
        {{ route.label }}</a
      >
    </mat-nav-list>
  </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-result">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

Basically the routing and everything works. But two are strange

1. The routing displays the component - but I need to click inside the component to have it activated. But since I've already selected a route how to prevent this extra-click? Do I

2. Clicking into the component - the sidebar is closing although it should remain opened - at least on desktop. On mobile it should close but I don't see where I could influence the behaviour. fixedInViewport is set accordingly - therefore no real idea.

My project on Stackblitz

I use in my app the Material Sidebar and navigate with the router. Basically it looks like

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="openCollapsed()"
        [opened]="!isMobile"
        [fixedInViewport]="!isMobile"
        [fixedTopGap]="64"
        [fixedBottomGap]="40"
        [mode]="isMobile ? 'over' : 'side'"
    >
    <mat-nav-list>
      <a
        *ngFor="let route of routes"
        mat-list-item
        (click)="selectNavItem(route.path)"
      >
        {{ route.label }}</a
      >
    </mat-nav-list>
  </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-result">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

Basically the routing and everything works. But two are strange

1. The routing displays the component - but I need to click inside the component to have it activated. But since I've already selected a route how to prevent this extra-click? Do I

2. Clicking into the component - the sidebar is closing although it should remain opened - at least on desktop. On mobile it should close but I don't see where I could influence the behaviour. fixedInViewport is set accordingly - therefore no real idea.

My project on Stackblitz

• angular-material
• angular-routing

1 Answer 1

When navigating trigger the navbar close, this will show the component directly.

selectNavItem(route: string): void {
    this.router.navigate([route]).then(() => {
        this.sidenav().close();
    });
}

When resize, toggle collapsed only for desktop:

ngOnInit() {
    this.observer.observe(['(max-width: 800px)']).subscribe((screenSize) => {
        this.isMobile = screenSize.matches;
        if(!screenSize.matches) {
                this.isCollapsed = true;
        }
    });
} 

The opened is trigger on desktop, which open the sidenav, to block this, we can use && and trigger the function only on mobile.

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="isMobile && openCollapsed()"