title: Place app content inside mat-sidenav-content
body: <p>I have an app that uses FlexLayoutModule. I have a header that is responsive for both web and mobile however I am not sure how I should structure my app correctly. I want to add my app content inside the mat-sidenav-container.</p>
  <p>header.component.html</p>
  <pre><code>&lt;div&gt; 
      &lt;mat-toolbar color=&quot;primary&quot;&gt;
        &lt;div fxShow=&quot;true&quot; fxHide.gt-sm=&quot;true&quot;&gt;
          &lt;button mat-icon-button (click)=&quot;sidenav.toggle()&quot;&gt;
            &lt;mat-icon&gt;Menu&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/div&gt;
    
        &lt;a mat-button class=&quot;companyName&quot; routerLink=&quot;/&quot;&gt;
          &lt;span&gt;Wilderness Adventures&lt;/span&gt;
        &lt;/a&gt;
        &lt;span class=&quot;example-spacer&quot;&gt;&lt;/span&gt;
        &lt;div fxShow=&quot;true&quot; fxHide.lt-md=&quot;true&quot;&gt;
          &lt;a mat-button routerLink=&quot;/about-us&quot;&gt;Latest listings&lt;/a&gt;
          &lt;a mat-button routerLink=&quot;/prices&quot;&gt;Experiences&lt;/a&gt;
          &lt;a mat-button routerLink=&quot;/start-page&quot;&gt;Hot deal&lt;/a&gt;
          &lt;mat-icon&gt;home&lt;/mat-icon&gt;Become a host
        &lt;/div&gt;
    
      &lt;/mat-toolbar&gt;
      &lt;mat-sidenav-container fxFlexFill class=&quot;example-container&quot;&gt;
    
        &lt;mat-sidenav color=&quot;primary&quot; #sidenav fxLayout=&quot;column&quot; mode=&quot;over&quot;  opened=&quot;false&quot; fxHide.gt-sm=&quot;true&quot;&gt;
          &lt;div fxLayout=&quot;column&quot;&gt;
              &lt;a mat-button routerLink=&quot;/about-us&quot;&gt;Latest listings&lt;/a&gt;
              &lt;a mat-button routerLink=&quot;/prices&quot;&gt;Experiences&lt;/a&gt;
              &lt;a mat-button routerLink=&quot;/start-page&quot;&gt;Hot deal&lt;/a&gt;
              &lt;mat-icon&gt;home&lt;/mat-icon&gt;Become a host      
          &lt;/div&gt;
        &lt;/mat-sidenav&gt;
        &lt;mat-sidenav-content fxFlexFill&gt;
          &lt;!--should app content go here--&gt;
        &lt;/mat-sidenav-content&gt;
      &lt;/mat-sidenav-container&gt;
    &lt;/div&gt;
  </code></pre>
  <p>app.component.html</p>
  <pre><code>&lt;app-landing&gt;&lt;/app-landing&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>Here is a full stackblitz of my app</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-gygw2g?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-gygw2g?file=src/app/app.component.html</a></p>
  <p>If you see the app you will notice that my content sits below the mat-sidenav-container but I want to not have the blue block</p>