MATERIAL NAVBAR

$ ng generate @angular/material:material-nav --name=modules/intranet/components/navbar –spec=false


Modificar estilo en styles.scss
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html,
body {
  height: 100%;
}

body {
  margin: 0;
}


Editar el archivo navbar.component.css
.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
  background-color: rgb(42, 63, 84);
}

.sidenav {
  mat-toolbar {
    background-color: rgb(42, 63, 84);
  }

}

.mat-list-item {
  color: white;
}

.sidenav > .mat-nav-list > a:hover {
  background-color: rgb(66, 86, 104);
}

.active-list-item {
  background-color: rgb(66, 86, 104) !important;
}

.span-usuario {
  width: 200px;
  height: auto;
  color: white;
  font-size: 15px;
  text-align: center;
  padding: auto;
  margin-top: 4px;
  margin-bottom: 8px;
}

.mat-toolbar {
  height: 58px;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
}

.spacer {
  flex: 1 1 auto;
}

mat-toolbar a {
  display: inline-block;
  margin: 0 10px;
  color: white;
  text-decoration: none;
}

.img-responsive {
  width: auto;
  height: 42px;
}

.mat-nav-list {
  padding-top: 0px;
}

mat-icon {
  margin-right: 5px;
}

.child-link {
  background-color: #6f7f8e;
  content: "";
  height: 8px;
  width: 8px;
  z-index: 1;
  border-radius: 50%;
  margin-right: 10px;
}

.selected {
  border-top: 1px solid #546371;
  border-bottom: 1px solid #1f2f3f;
}
/* .selected div a{
  border-right: 5px solid #1abb9c;
} */

Editar el archivo navbar.component.html
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar>
      <img class="img-responsive" src="./assets/images/icons/perficon.png">
    </mat-toolbar>
    <div class="span-usuario">
      <span>
        TECNICO INFORMATICO
        <br>
        (U.A.)
      </span>
    </div>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/intranet/home']" routerLinkActive="active-list-item"
        [ngClass]="{'selected':showSubmenu1}" (click)="showSubmenu1 = !showSubmenu1">
        <mat-icon>home</mat-icon> Home
      </a>
      <a mat-list-item routerLinkActive="active-list-item" [ngClass]="{'selected':showSubmenu2}"
        (click)="showSubmenu2 = !showSubmenu2">
        <mat-icon>assignment</mat-icon> Configuracion
        <span class="spacer"></span>
        <mat-icon>expand_more</mat-icon>
      </a>
      <div *ngIf="showSubmenu2">
        <a mat-list-item [routerLink]="['/intranet/configuracion/maestras']" routerLinkActive="active-list-item"
          [ngStyle]="{'padding-left': '20px'}">
          <span class="child-link"></span>
          Maestras
        </a>
      </div>

      <a mat-list-item routerLinkActive="active-list-item" [ngClass]="{'selected':showSubmenu3}"
        (click)="showSubmenu3 = !showSubmenu3">
        <mat-icon>dynamic_feed</mat-icon> Administracion
        <span class="spacer"></span>
        <mat-icon>expand_more</mat-icon>
      </a>
      <div *ngIf="showSubmenu3">
        <a mat-list-item [routerLink]="['/intranet/administracion/productos']" routerLinkActive="active-list-item"
          [ngStyle]="{'padding-left': '20px'}">
          <span class="child-link"></span>
          Productos
        </a>
      </div>
      <div *ngIf="showSubmenu3">
        <a mat-list-item [routerLink]="['/intranet/administracion/proveedores']" routerLinkActive="active-list-item"
          [ngStyle]="{'padding-left': '20px'}">
          <span class="child-link"></span>
          Proveedores
        </a>
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Facturador electronico</span>

      <span class="spacer"></span>
      <button mat-button [matMenuTriggerFor]="usuario">
        AMILCAR
        <!-- <span>(Jefe Unidad Territorial)</span> -->
        <mat-icon>expand_more</mat-icon>
      </button>
      <mat-menu #usuario="matMenu" xPosition="after" [overlapTrigger]="false">
        <button mat-menu-item (click)="salir()">Salir</button>
      </mat-menu>
    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Editar el archivo navbar.component.ts
import { Component, Input, OnInit, Inject } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UsuarioService } from 'src/app/core/services/usuario.service';
import { Router } from '@angular/router';

@Component({
  selector: 'navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  @Input() showSubmenu1: boolean;
  @Input() showSubmenu2: boolean;

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(
    private breakpointObserver: BreakpointObserver,
    @Inject(UsuarioService) private user: UsuarioService,
    private router: Router) { }

  ngOnInit() {
    if (this.user.getId == null) {
      this.router.navigate(['/sesion/login']);
    }
  }
}

Agregar el el archivo home.component.html lo siguiente:
<navbar [showSubmenu1]="true">
  <h2>Hola mundo</h2>
</navbar>

Adicional mente es necesario agregar algunos componentes del materiales en el archivo material.modules.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatToolbarModule, MatSidenavModule, MatMenuModule } from '@angular/material';
import { ResponsiveRowsDirective } from '../core/directives/responsive-rows.directive';
import { UppercasedDirective } from '../core/directives/uppercased.directive';
import { ReactiveFormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatMenuModule,
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatMenuModule,
  ]
})

export class MaterialModule { }

Y para la imagen en el toolbar es necesario agregar un logo en: