1

How can I make angular material toolbar fixed top starting from very left corner of page and side nav below the toolbar. actually something similar to Angular material site (https://material.angular.io/components/categories), I could create it with bootstrap or with custom css but I want it pure Angular material any idea would be appreciated.

        <mat-sidenav-container class="container" >
            <mat-sidenav #sidenav mode="side" opened >
                <button color='primary' mat-button routerLink='/Admin'>Admins</button>
                <button color='primary' mat-button routerLink='/Manager'>Managers</button>
                <button color='primary' mat-button routerLink='/User'>Users</button>
            </mat-sidenav>
            <mat-sidenav-content>
                <mat-toolbar color='primary'>
                    <mat-toolbar-row>
                        <button mat-icon-button (click)="sidenav.toggle()">
                            <mat-icon>menu</mat-icon>
                        </button>
                        <img src="../assets/img/mLogo.svg">
                        <span class="spacer"></span>
                        <mat-icon>favorite</mat-icon>
                        <button mat-icon-button [matMenuTriggerFor]="menu">
                          <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                          <button mat-menu-item>
                            <mat-icon>publish</mat-icon>
                            <span>Share</span>
                          </button>
                          <button mat-menu-item disabled>
                            <mat-icon>mode_comment</mat-icon>
                            <span>Comment</span>
                          </button>
                          <button mat-menu-item>
                            <mat-icon>delte</mat-icon>
                            <span>Delete</span>
                          </button>
                        </mat-menu>
                    </mat-toolbar-row>
                  </mat-toolbar>

                  <router-outlet></router-outlet>
            </mat-sidenav-content>
            
          
          </mat-sidenav-container>
MJ X
  • 8,506
  • 12
  • 74
  • 99
  • This question has already been asked and answered: https://stackoverflow.com/questions/53709700/how-to-place-mat-toolbar-on-top-of-mat-sidenav-angular-material-5/53711242#53711242 – G. Tranter Nov 25 '19 at 16:21
  • 1
    Hi Thanks for details, it solved my problem – MJ X Nov 26 '19 at 18:34

1 Answers1

0

Have you tried something like the solution below on stackblitz: https://stackblitz.com/edit/angular-hxgufx

There is some custom css, namely the position fixed, but material api does not provide anything for payment. How could it? There are infinite combinations of components, html elements and css for it to take into account.

.position-fixed{
    position: fixed
}
Athanasios Kataras
  • 25,191
  • 4
  • 32
  • 61
  • Yes, I tried that, My requirement is that the left menu should start under the toolbar and the toolbar should be fixed top. I want something similar to Angular material site, I put the link on my question – MJ X Nov 25 '19 at 15:00