Navbar Angular Material y Bootstrap

Crear componente navbar: ng g c navbar

En el navbar.component.css:

.menu-spacer {
    flex: 1 1 auto;
}

mat-sidenav-container{
    height: 100%;
}

mat-sidenav{
    padding: 16px;
}

mat-sidenav-content{
    padding-top: 30px;
}
mat-sidenav{
    background-color: gainsboro;
}

.mat-form-field + .mat-form-field {
    margin-left: 8px;
}

En el navbar.component.html:

<mat-toolbar class="navbar-default">

    <div class="navbar-header">
    <button type="button" (click)="opened=!opened" class="navbar-toggle collapsed" data-toggle="collapse" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>

    <a class="navbar-brand" [routerLink]="'/core/home'"><b>EuropCar</b></a>

    <div class="collapse navbar-collapse" >

    <ul class="nav navbar-nav">

    <!--menu con pestaña 1-->

    <li class="dropdown">

    <button mat-button [matMenuTriggerFor]="menuCliente" class="navbar-brand">Cliente</button>
    <ul class="dropdown-menu">
        <mat-menu #menuCliente="matMenu">
            <button mat-menu-item [routerLink]="'/rutaNuevoCliente'">Nuevo Cliente</button>

            <mat-divider></mat-divider>

            <button mat-menu-item [routerLink]="'/rutaListaClientes'">Lista de Clientes</button>

        </mat-menu>
    </ul>

    </li>
    <!--***-->

  <!--menu con pestaña 2-->

    <li class="dropdown">

    <button mat-button [matMenuTriggerFor]="menuPlanilla" class="navbar-brand">Planilla</button>
    <ul class="dropdown-menu">
        <mat-menu #menuPlanilla="matMenu">
            <button mat-menu-item [routerLink]="'/rutaNuevoPlanilla'">Nueva Planilla</button>

            <mat-divider></mat-divider>

            <button mat-menu-item [routerLink]="'/rutaListaPlanilla'">Lista de Planillas</button>

        </mat-menu>
    </ul>

    </li>
    <!--***-->

    </ul>
  </div>

 <!--ico-->
<span class="menu-spacer"></span>
<button mat-icon-button><mat-icon>login</mat-icon></button>
<button mat-icon-button ><mat-icon>logout</mat-icon></button>

</mat-toolbar>

<!--contenedor modo celular-->

<mat-sidenav-container>
<mat-sidenav mode="over" [(opened)]="opened">
<div>

<!--inicio del acordion-->
<mat-accordion>

<!--cliente modo celular-->
    <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
            <mat-panel-title> Cliente </mat-panel-title>
        </mat-expansion-panel-header>
        <button mat-menu-item [routerLink]="'/rutaNuevoCliente'">Nuevo Cliente</button>
        <mat-divider></mat-divider>
        <button mat-menu-item [routerLink]="'/rutaListaCliente'">Lista de Clientes</button>
    </mat-expansion-panel>

<!--planilla modo celular-->
    <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
            <mat-panel-title> Planilla </mat-panel-title>
        </mat-expansion-panel-header>
        <button mat-menu-item [routerLink]="'/rutaNuevaPlanilla'">Nuevo Planilla</button>
        <mat-divider></mat-divider>
        <button mat-menu-item [routerLink]="'/rutaListaPlanilla'">Lista de Planillas</button>
    </mat-expansion-panel>
    </mat-accordion>

    </div>
    </mat-sidenav>

<!--***-->
    <mat-sidenav-content>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
    </mat-sidenav-content>
</mat-sidenav-container>

En el navbar.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

panelOpenState = false;
opened = false;

constructor() {}

ngOnInit(){}

}

En el app.component.html:

<app-navbar></app-navbar>

>> Ver como crear el Footer