CODEWITHSUNDEEP
angularangular-materialangular-material-5sidenav
S. A
S. A

Reputation: 543

My sidenav does not push the content, it overcomes it

I'm trying to make the Side Material Sidenav push the content when I open the bar and obviously when it closes; the elements that were pushed back into place. Currently what it does is open up over the content

See image

Here's my app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
    <mat-toolbar color="primary" class="fixed-header">
        <img src="" />
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="spacer"></span>
        <button type="button" mat-icon-button href="">
            <mat-icon matTooltip="Salir">exit_to_app</mat-icon>
        </button>
    </mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
    <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'"
        [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 1;">
        <mat-nav-list>
            <mat-list-item>
                <a routerLink="/dashboard">Home</a>
                <mat-icon mat-list-icon>home</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/parametros">Section 2</a>
                <mat-icon mat-list-icon>tune</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/#">Section 3</a>
                <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/#">Section 4</a>
                <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
                <span class="full-width" *ngIf="isExpanded || isShowing">Dropdown</span>
                <mat-icon mat-list-icon>flash_on</mat-icon>
                <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
            <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
                <mat-list-item>
                    <a routerLink="/#">Section Dropdown 1</a>
                </mat-list-item>
                <mat-list-item>
                    <a routerLink="/#">Section Dropdown 2</a>
                </mat-list-item>
                <h2 matSubheader class="mat-submenu-title">
                    <mat-icon>account_balance</mat-icon>Title Dropdown
                </h2>
                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                    <span class="full-width" *ngIf="isExpanded || isShowing">Dropdown 2 (inside)</span>
                    <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
                </mat-list-item>
                <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
                    <mat-list-item>
                        <a routerLink="/topupcard">Dropdown section</a>
                    </mat-list-item>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown section</a>
                    </mat-list-item>
                    <h2 matSubheader class="mat-submenu-title">
                        <mat-icon>card_travel</mat-icon> Title
                    </h2>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown 2</a>
                    </mat-list-item>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown 2</a>
                    </mat-list-item>
                </div>
            </div>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-container>

My app-header.component.ts

import { Component, ViewChild } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { User } from '../../resources/user.resource';
import { UserService } from '../../services/user.service';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
    selector: 'app-header',
    templateUrl: './app-header.component.html',
    styleUrls: ['./app-header.component.css']
})
export class AppHeader {
    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
        .pipe(map(result => result.matches));

    constructor(private breakpointObserver: BreakpointObserver) { }

    @ViewChild('sidenav') sidenav: MatSidenav;
    isExpanded = true;
    showSubmenu = false;
    isShowing = false;
    showSubSubMenu = false;

    onmouseenter() {
        if (!this.isExpanded) {
            this.isShowing = true;
        }
    }

    onmouseleave() {
        if (!this.isExpanded) {
            this.isShowing = false;
        }
    }
}

My app.component.html

<app-header></app-header>
<div class="app-body">
    <main class="main">
        <div class="container-fluid">
            <router-outlet></router-outlet>
            <ngx-loading [show]="loading"></ngx-loading>
        </div>
    </main>
</div>

Upvotes: 4

Views: 7384

Answers (3)

S. A
S. A

Reputation: 543

Fixed: Just have to add 

<router-outlet></router-outlet>

Inside the <mat-sidenav-content></mat-sidenav-content> tag, in the app-header.component.html file. Thanks everyone for the answers!

Upvotes: 0

veben
veben

Reputation: 22262

You don't need [] for parameters. Replace:

[mode]="(isHandset$ | async) ? 'side' : 'push'"

by: 

mode="side"

You may have to add autosize class on your mat-sidenav-container, like that:

<mat-sidenav-container autosize>

Upvotes: 0

Mel
Mel

Reputation: 6065

You can use autosize on mat-sidenav-container

Template

<mat-sidenav-container autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true">

    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
       <mat-icon mat-list-icon>home</mat-icon>
         <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <div class="example-sidenav-content">
    Main content that resizes properly
  </div>

</mat-sidenav-container>

Component

@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
  isExpanded = false;
}

See it on stackblitz

Upvotes: 8

Related Questions