Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create Right side Navbar with md-sidenav in Angular Material - Angular 2

I am trying to create "right navbar" with angular material 2 md-sidenav. No matter what I do, it is always coming on the left. How can I change this to right sidenav instead?

  <md-sidenav #sidenavright mode="side" class="app-sidenav" opened="true">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>
like image 813
so-random-dude Avatar asked Mar 02 '17 19:03

so-random-dude


People also ask

How do I use Sidenav in angular materials?

Specifying the main and side contentBoth the main and side content should be placed inside of the <mat-sidenav-container> , content that you don't want to be affected by the sidenav, such as a header or footer, can be placed outside of the container. The side content should be wrapped in a <mat-sidenav> element.

How do I hide Sidenav?

Our main idea to hide SideNav is by creating multiple layouts. In the following routing configuration, we have 2 parent routes configured as login and home. With login we have simply LoginComponent which will be rendered in <router-outlet> and post login main route will be rendered.


2 Answers

Okay, it's easier than I thought, silly me!!

To align md-sidenav to right side, just add align="end" to md-sidenav element.

  <md-sidenav align="end" #sidenavright mode="side" class="app-sidenav" opened="true">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>

Update

It's changed to position="end" in the later versions

Example

<mat-sidenav #sidenavright position="end">
       Right sideNav
</mat-sidenav>
like image 187
so-random-dude Avatar answered Oct 19 '22 20:10

so-random-dude


<mat-sidenav-container>

    <mat-sidenav #right position="start">
       Start Sidenav.
    </mat-sidenav>

    <mat-sidenav #left position="end">
       End Sidenav.
    </mat-sidenav>

<div>
    <button mat-button (click)="right.open()">right</button>
    <button mat-button (click)="left.open()">left</button>
</div>

</mat-sidenav-container>
like image 24
Mohammad Hassani Avatar answered Oct 19 '22 21:10

Mohammad Hassani