The Content should be Moved When the Sidenav bar Menu Appear - html

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