src/app/cluster/cluster.component.ts
| selector | hi-cluster | 
| styleUrls | ./cluster.component.scss | 
| templateUrl | ./cluster.component.html | 
| Properties | 
| Methods | 
| constructor(media: MediaObserver) | ||||||
| Defined in src/app/cluster/cluster.component.ts:12 | ||||||
| 
                                    Parameters :
                                     
 | 
| ngOnInit | 
| ngOnInit() | 
| Defined in src/app/cluster/cluster.component.ts:16 | 
| 
                        Returns :          void | 
| toggleSidenav | 
| toggleSidenav() | 
| Defined in src/app/cluster/cluster.component.ts:27 | 
| 
                        Returns :          void | 
| isNarrowView | 
| Type : boolean | 
| Defined in src/app/cluster/cluster.component.ts:12 | 
| sidenav | 
| Decorators : 
                            @ViewChild('sidenav', {static: true}) | 
| Defined in src/app/cluster/cluster.component.ts:10 | 
import { Component, OnInit, ViewChild } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
@Component({
  selector: 'hi-cluster',
  templateUrl: './cluster.component.html',
  styleUrls: ['./cluster.component.scss'],
})
export class ClusterComponent implements OnInit {
  @ViewChild('sidenav', { static: true }) sidenav;
  isNarrowView: boolean;
  constructor(protected media: MediaObserver) {}
  ngOnInit() {
    // auto adjust side nav only if not embed
    this.isNarrowView = this.media.isActive('xs') || this.media.isActive('sm');
    this.media.asObservable().subscribe((change: MediaChange[]) => {
      change.forEach((item) => {
        this.isNarrowView = item.mqAlias === 'xs' || item.mqAlias === 'sm';
      });
    });
  }
  toggleSidenav() {
    this.sidenav.opened ? this.sidenav.close() : this.sidenav.open();
  }
}
<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
<mat-sidenav-container fxFill>
  <mat-sidenav
    #sidenav
    [mode]="isNarrowView ? 'over' : 'side'"
    [opened]="!isNarrowView"
    [disableClose]="!isNarrowView"
    class="mat-elevation-z4"
  >
    <hi-cluster-list></hi-cluster-list>
  </mat-sidenav>
  <section fxFill>
    <router-outlet></router-outlet>
  </section>
</mat-sidenav-container>
<button
  mat-mini-fab
  [ngClass]="['toggle-button', sidenav.opened ? 'open' : 'close']"
  color=""
  (click)="toggleSidenav()"
>
  <mat-icon>chevron_{{ sidenav.opened ? 'left' : 'right' }}</mat-icon>
</button>
                    ./cluster.component.scss
                
.mat-sidenav {
  width: 25vw;
  min-width: 200px;
}
.toggle-button {
  position: fixed;
  top: 50%;
  z-index: 3;
  transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  &.open {
    left: calc(25vw - 20px);
  }
  &.close {
    left: -15px;
  }
}