title: The Content should be Moved When the Sidenav bar Menu Appear
body: <p>Goal:<br>
  When you click on the icon menu in the header toolbar, it should be expanded and the content of "<code>&lt;mat-sidenav-content&gt;</code>" should be moved more to the right due to the space of the sidenav menu.  </p>
  
  <p>Problem:<br>
  When clicking on the icon menu the content of "<code>&lt;mat-sidenav-content&gt;</code>" doesn't move to the right side direction due to the expansion space of the sidenavemenu. The content is static when you expand the sidenav bar menu.</p>
  
  <p>What part am I missing?  </p>
  
  <p>Info:<br>
  *Using angular 9<br>
  *A example of a content that will be moved when you make the sidebar nav menu to appear.<br>
  (<a href="https://stackblitz.com/angular/qoaqpenxjqy" rel="nofollow noreferrer">https://stackblitz.com/angular/qoaqpenxjqy</a>)<br>
  *When the menu is not expanded, the icon should appear and not the text.  </p>
  
  <p>Stackblitz:<br>
  <a href="https://stackblitz.com/edit/angular-ymkpvj-hso3tw" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ymkpvj-hso3tw</a></p>
  
  <p>Thank you!</p>
  
  <hr>
  
  <pre><code>&lt;mat-toolbar color="primary" class="example-toolbar"&gt;
      &lt;button mat-icon-button (click)="isExpanded = !isExpanded" &gt;
      &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
    &lt;/button&gt;
      &lt;h1 class="example-app-name"&gt;Nested Menus&lt;/h1&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;mat-sidenav-container class="example-container" &gt;
  
      &lt;mat-sidenav #sidenav class="example-sidenav" 
      mode="side" 
      opened="true" 
      (mouseenter)="mouseenter()" 
      (mouseleave)="mouseleave()"
    &gt;
  
          &lt;mat-nav-list&gt;
              &lt;mat-list-item (click)="showSubmenu = !showSubmenu" class="parent"&gt;
                  &lt;mat-icon mat-list-icon&gt;home&lt;/mat-icon&gt;
                  &lt;span class="full-width" *ngIf="isExpanded || isShowing"&gt;Parent Menu&lt;/span&gt;
                  &lt;mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing"&gt;expand_more&lt;/mat-icon&gt;
              &lt;/mat-list-item&gt;
              &lt;div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded"&gt;
                  &lt;a mat-list-item href="..."&gt;Submenu Item 1&lt;/a&gt;
                  &lt;a mat-list-item href="..."&gt;Submenu Item 2&lt;/a&gt;
                  &lt;mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent"&gt;
                      &lt;span class="full-width" *ngIf="isExpanded || isShowing"&gt;Nested Menu&lt;/span&gt;
                      &lt;mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing"&gt;expand_more&lt;/mat-icon&gt;
                  &lt;/mat-list-item&gt;
                  &lt;div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded"&gt;
                      &lt;mat-list-item&gt;SubSubmenu Item 1&lt;/mat-list-item&gt;
                      &lt;mat-list-item&gt;SubSubmenu Item 2&lt;/mat-list-item&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/mat-nav-list&gt;
      &lt;mat-nav-list&gt;
      &lt;/mat-nav-list&gt;
  
      &lt;/mat-sidenav&gt;
  
    &lt;mat-sidenav-content&gt;
      test test test test test test test
    &lt;/mat-sidenav-content&gt;
  
  &lt;/mat-sidenav-container&gt;
  
  
  
  &lt;!-- Copyright 2017 Google Inc. All Rights Reserved.
      Use of this source code is governed by an MIT-style license that
      can be found in the LICENSE file at http://angular.io/license --&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>import {Component, ViewChild} from '@angular/core';
  import {FormBuilder, FormGroup} from '@angular/forms';
  
  /** @title Fixed sidenav */
  @Component({
    selector: 'sidenav-fixed-example',
    templateUrl: 'sidenav-fixed-example.html',
    styleUrls: ['sidenav-fixed-example.css'],
  })
  export class SidenavFixedExample {
  
    /** 
    options: FormGroup;
  
    constructor(fb: FormBuilder) {
      this.options = fb.group({
        bottom: 0,
        fixed: false,
        top: 0
      });
    }
  */
  
  constructor() {}
  
    events: string[] = [];
  
  
  
    isExpanded = true;
    showSubmenu: boolean = false;
    isShowing = false;
    showSubSubMenu: boolean = false;
  
    mouseenter() {
      if (!this.isExpanded) {
        this.isShowing = true;
      }
    }
  
    mouseleave() {
      if (!this.isExpanded) {
        this.isShowing = false;
      }
    }
  
  }
  </code></pre>
  
  <hr>
  
  <pre><code>.example-container {
    height: 500px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  .example-sidenav-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  .example-sidenav {
     user-select: none;
  }
  .full-width {
    width: 100%;
  }
  .menu-button {
    transition: 300ms ease-in-out;
    transform: rotate(0deg);
  }
  .menu-button.rotated {
    transform: rotate(180deg);
  }
  .submenu {
    overflow-y: hidden;
    transition: transform 300ms ease;
    transform: scaleY(0);
    transform-origin: top;
    padding-left: 30px;
  }
  .submenu.expanded {
    transform: scaleY(1);
  }
  </code></pre>