Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Followers 0
Login Register as User

Angular Sidebars

28.01.2021 (👁3851)

Angular Sidebars

Responsive Design

With Hamburger Menu to open and close


<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">

  <mat-toolbar color="primary" class="example-toolbar">

    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

    <h1 class="example-app-name">Responsive App</h1>


  <mat-sidenav-container class="example-sidenav-container"

                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">

    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"

                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">


        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>




      <p *ngFor="let content of fillerContent">{{content}}</p>




<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>



Drawer with explicit backdrop setting

Sidenav Mode: Side / Over / Push

Has Backdrop: Unset / True / False


Autosize sidenav