How can I implement the angular 4 material Sidenav component?

Question

The sidenav component it's working but it's not taking the whole website, you can see this video to have a better idea here

the idea it's to show it on mobile device this is my app component

app.component

<wh-header></wh-header>

<div class="container">
  <router-outlet></router-outlet>
  <wh-footer></wh-footer>
</div>

but how can I set the component to work properly if the content that I want to show is in the header component ?

this is the code that copied this from the website angular material website.

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

header.component.html

I try to implement in my header component

<md-sidenav-container class="example-container">
<header class="header flex  flex-content-between">
  <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']">
    <img src="assets/nav/logo.png" class="nav-logo" alt="Logo">
  </a>

  <!-- user is not logged in -->
  <div *ngIf="!authservice.isAuthenticated() else user_is_loggedIn">
  </div>

  <!-- user is already logged in -->
  <ng-template #user_is_loggedIn>

  <md-sidenav #sidenav class="example-sidenav">
   <ul>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
   </ul> 
  </md-sidenav>
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>
  </ng-template>

</header>
</md-sidenav-container>

header.component.css

taking from the angular material example

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}

Answer 1

This is how I solved this issue. Don't know if it's alright just correct me if there is a better way

basically

I split the sideNav component on my app and header component

which is weird but works

app.component.html

I wrapped my app with <md-sidenav-container> from the SideNav component

<md-sidenav-container>
    <wh-header></wh-header>
    <div class="container">
      <router-outlet></router-outlet>
      <wh-footer></wh-footer>
    </div>
</md-sidenav-container>

header.component.html

In my header I have the rest of the code the <md-sidenav> and the button

<header class="header flex  flex-content-between">
  <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']">
    <img src="assets/nav/logo.png" class="nav-logo" alt="Logo">
  </a>

  <!-- user is not logged in -->
  <div *ngIf="!authservice.isAuthenticated() else user_is_loggedIn">
  </div>

  <!-- user is already logged in -->
  <ng-template #user_is_loggedIn>

  <md-sidenav #sidenav class="example-sidenav">
   <ul>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
     <li><a href="">about</a></li>
   </ul> 
  </md-sidenav>
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.toggle()">
      Open sidenav
    </button>
  </div>
  </ng-template>

</header>

I have to wrapped my app with the <md-sidenav-container> to have the animation and the having the menu in the whole website

this is my solution