Open angular material sidebar at the end of parent component

Question

I have an angular material sidenav, when i open it, sidenav it's alway aligned at left position of the window

But i want to open it always at the end of the component with blue background like in this screen:

here it's my component with blue background, i also added here mat-sidenav-container element from angular material:

<div class="nav">
  <div class="logo">
  </div>
  <div class="nav-links">
   <button (click)="sidenav.toggle()">Open</button>
  </div>
  <div class="nav-items">
  </div>

  <mat-sidenav-container>
   <mat-sidenav #sidenav [mode]="'side'">
    <p>Content</p>
   </mat-sidenav>
  </mat-sidenav-container>
</div>

Do you have any ideas how can i open sidenav menu as in second screen? Thanks

Answer 1

I think you're looking for this behavior: https://stackblitz.com/edit/angular-sidenav-example

I'm using @angular/flex-layout to take care of the layout.

<mat-toolbar color="primary">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1>Responsive App</h1>
</mat-toolbar>

<div fxLayout="row">
    <div fxFlex="10">
        logo
    </div>


    <mat-drawer-container>
        <mat-drawer #snav [mode]="'side'">
            <mat-nav-list>
                <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
            </mat-nav-list>
        </mat-drawer>

        <mat-drawer-content>
            <p *ngFor="let content of fillerContent">{{content}}</p>
        </mat-drawer-content>
    </mat-drawer-container>
</div>