4

How can I set Side nav below the toolbar in angular material design? so that sidenav does not come over toolbar..

naf123
  • 79
  • 2
  • 7
  • 1
    I've got it setup that way and works perfectly... But if you don't say what you've tried and what goes wrong then nobody can help you. (That's why your question was downvoted by somebody the same minute you published it, it doesn't offer much to anybody to tell what's wrong) – Vi100 Feb 07 '17 at 11:02

3 Answers3

0

It's a matter of layout. Just use this page structure:

<div id="main" class="layout-row">
    <div id="content" class="layout-column flex">
        <md-toolbar>
            YOUR TITLE HERE
        </md-toolbar>
        <md-content>
            YOUR CONTENTS HERE
        <md-content>
    </div>

    <md-sidenav class="md-sidenav-left" md-component-id="myPanel">
        THE SIDENAV CONTENT
    <md-sidenav>
</div>

And that's it!

Vi100
  • 4,080
  • 1
  • 27
  • 42
0

Here you go. This is what you want, in case it will help someone by the way

 <body ng-app="" layout="column">
      <md-toolbar>
      </md-toolbar>
      <md-content flex>
           <md-sidenav>
           </md-sidenav>
           <ui-view></ui-view>
      </md-content>
 </body
EmptyCup
  • 421
  • 4
  • 14
0
<mat-drawer-container class="example-container">
  <mat-toolbar class="example-header" class="fixed-header" color="primary">
    <mat-toolbar-row>

      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span>
        </mat-icon>
        <mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span>
        </mat-icon>
      </button>


    </mat-toolbar-row>
  </mat-toolbar>
  <mat-drawer #drawer class="example-sidenav" mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
      <a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>

    </mat-nav-list>


  </mat-drawer>


  <div class="example-sidenav-content">

    <router-outlet></router-outlet>
  </div>
  <mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>
Ollie
  • 1,641
  • 1
  • 13
  • 31
meenu
  • 9
  • 2
  • 3
    If this should be the solution to the original question, please add some explanation such that others can learn from it – Nico Haase Oct 24 '18 at 13:02