The Content should be Moved When the Sidenav bar Menu Appear

Question

Goal:
When you click on the icon menu in the header toolbar, it should be expanded and the content of "<mat-sidenav-content>" should be moved more to the right due to the space of the sidenav menu.

Problem:
When clicking on the icon menu the content of "<mat-sidenav-content>" 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.

What part am I missing?

Info:
*Using angular 9
*A example of a content that will be moved when you make the sidebar nav menu to appear.
(https://stackblitz.com/angular/qoaqpenxjqy)
*When the menu is not expanded, the icon should appear and not the text.

Stackblitz:
https://stackblitz.com/edit/angular-ymkpvj-hso3tw

Thank you!

---

<mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="isExpanded = !isExpanded" >
    <mat-icon>menu</mat-icon>
  </button>
    <h1 class="example-app-name">Nested Menus</h1>
</mat-toolbar>

<mat-sidenav-container class="example-container" >

    <mat-sidenav #sidenav class="example-sidenav" 
    mode="side" 
    opened="true" 
    (mouseenter)="mouseenter()" 
    (mouseleave)="mouseleave()"
  >

        <mat-nav-list>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
                <mat-icon mat-list-icon>home</mat-icon>
                <span class="full-width" *ngIf="isExpanded || isShowing">Parent Menu</span>
                <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
            <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
                <a mat-list-item href="...">Submenu Item 1</a>
                <a mat-list-item href="...">Submenu Item 2</a>
                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                    <span class="full-width" *ngIf="isExpanded || isShowing">Nested Menu</span>
                    <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
                </mat-list-item>
                <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
                    <mat-list-item>SubSubmenu Item 1</mat-list-item>
                    <mat-list-item>SubSubmenu Item 2</mat-list-item>
                </div>
            </div>
        </mat-nav-list>
    <mat-nav-list>
    </mat-nav-list>

    </mat-sidenav>

  <mat-sidenav-content>
    test test test test test test test
  </mat-sidenav-content>

</mat-sidenav-container>



<!-- 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 -->

---

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;
    }
  }

}

---

.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);
}

Answer 1

Demo make opened propery isExpanded

[opened]="isExpanded" 

but if you want to show small icon while closing then you need to change css. Because navigation position is absolute but, content is relative. and content changes with margin-left property to opened property value.

Possible solution

make both position relative and remove margin-left property for content in true condition of opened

.mat-sidenav{
  position: relative !important;
  height: 100%;
  overflow: auto;
  float: left;
}
.mat-drawer-content {
   margin-left: 0 !important;
}

you should put them inside style.css. Demo