Side Nav panel in Angular

Question

I am trying add a button (to open the side panel), but for some reason it shows up on the top left of the page. I want it to appear on the middle (right side) so when the user clicks on it the panel displays. I also want the current content on the page to zoom in when the side panel opens so the user is able to see both panel and the current content.

descripition of what you want talk

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

what is the correct CSS to?

Answer 1

I believe you're looking for this , it's an example provided in the Angular Material Documentation.

There are several ways to position the sidenav toggle button, you can either use CSS Flexbox or just add float: right property to the button. I would choose the first method combined with the use of mat-toolbar .