<mat-toolbar class="header-ctn">
  <mat-toolbar-row>
    <img
      class="is-desktop"
      src="https://api.alliedpayment.com/pictures/domain/allied/FILogo.jpg"
    />
    <span class="is-mobile">
      <svg
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 127.12 127.05"
        style="enable-background:new 0 0 127.12 127.05;"
        xml:space="preserve"
      >
        <style type="text/css">
          .st0 {
            fill: #39474f;
          }

          .st1 {
            fill: #be2438;
          }
        </style>
        <g>
          <polygon class="st0" points="67.98,4.2 4.24,4.2 4.24,29.48 	" />
          <polygon
            class="st0"
            points="97.65,123.44 123.48,123.44 123.48,58.32 	"
          />
          <polygon
            class="st0"
            points="65.75,109.11 18.18,61.53 4.24,67.09 4.24,123.44 60.05,123.44 	"
          />
        </g>
        <g>
          <polygon class="st1" points="96.32,30.56 44.14,51.1 67.81,58.38 	" />
          <polygon class="st1" points="69.07,59.64 76.14,83.06 96.89,31.02 	" />
        </g>
      </svg>
    </span>
    <span class="header-title header-color">Allied Admin</span>
    <span class="spacer"></span>

    <button mat-icon-button class="menu-options" (click)="drawer.toggle()">
      <mat-icon class="header-color">apps</mat-icon>
    </button>

    <button
      mat-icon-button
      [matMenuTriggerFor]="optionsMenu"
      class="menu-options"
    >
      <mat-icon class="header-color">more_vert</mat-icon>
    </button>

    <mat-menu #optionsMenu="matMenu">
      <button mat-menu-item><mat-icon>feedback</mat-icon>Send Feedback</button>
    </mat-menu>

    <button
      mat-button
      class="menu-options profile-button"
      [matMenuTriggerFor]="profileMenu"
    >
      <i class="material-icons profile-icon important-color">
        account_circle
      </i>
    </button>

    <mat-menu #profileMenu="matMenu">
      <app-user-profile></app-user-profile>
    </mat-menu>
  </mat-toolbar-row>
</mat-toolbar>

<!-- - Sid Navigation - -->
<mat-drawer-container>
  <mat-drawer #drawer mode="side" class="mat-drawer" opened>
    <div class="nav-list-item">
      <button
        mat-button
        [routerLink]="['/dashboard']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon>home</mat-icon>Home
      </button>
    </div>

    <div class="nav-list-item">
      <button
        mat-button
        [routerLink]="['/payment']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon> search</mat-icon>Payment Lookup
      </button>
    </div>

    <div class="nav-list-item">
      <button
        mat-button
        [routerLink]="['/acculynk']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon> share</mat-icon>Acculynk
      </button>
    </div>

    <div class="nav-list-item" routerLinkActive="active-section">
      <button
        mat-button
        [routerLink]="['/processing/']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon>layers</mat-icon> Daily Processing
      </button>

      <div class="sublinks-ctn">
        <button
          mat-button
          [routerLink]="['/processing/daily']"
          routerLinkActive="active"
          class="neutral-color sublink"
        >
          Daily Runs
        </button>

        <button
          mat-button
          [routerLink]="['/processing/goodnight-run']"
          routerLinkActive="active"
          class="neutral-color sublink"
        >
          Goodnight Run
        </button>

        <button
          mat-button
          [routerLink]="['/processing/history']"
          routerLinkActive="active"
          class="neutral-color sublink"
        >
          History Of Runs
        </button>
      </div>
    </div>

    <div class="nav-list-item">
      <button
        mat-button
        [routerLink]="['/ach']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon>format_list_numbered</mat-icon> Ach Setup
      </button>
    </div>

    <div class="nav-list-item">
      <button
        mat-button
        [routerLink]="['/conversion']"
        routerLinkActive="active"
        class="neutral-color"
      >
        <mat-icon>merge_type</mat-icon> Conversion Tool
      </button>
    </div>
  </mat-drawer>

  <main>
    <div class="router-content"><router-outlet></router-outlet></div>
  </main>
</mat-drawer-container>

./navigation.component.css

/*--- Header ---*/
.header-ctn {
  background-color: #f7f8fc;
  border-bottom: 1px solid #ccc;
}

.header-ctn button {
  width: 40px;
}

.header-ctn button.profile-button {
  width: 55px;
}

.mat-toolbar-row {
  height: auto;
  padding: 20px;
}

.header-title {
  padding-left: 15px;
  border-left: 1px solid #ccc;
  font-weight: 100 !important;
}

.mat-toolbar-row img {
  width: 150px;
  padding-right: 20px;
}

.mat-toolbar-row svg {
  width: 35px;
  padding-right: 20px;
  vertical-align: middle;
}

.menu-options {
  min-width: 24px;
  padding: 0px 5px;
}

.profile-icon {
  font-size: 35px;
}

/*--- Navigation ---*/
.center {
  text-align: center;
}

.active {
  color: #be2438;
}

.underline {
  text-decoration: underline;
}

.w-200-px {
  width: 200px;
}

.w-100-pc {
  width: 100%;
}

.mat-drawer {
  width: 250px;
  visibility: visible !important;
  background-color: #f7f8fc;
  border-right: 1px solid #ccc;
}

.nav-list-item {
  align-items: center;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #ccc;
  height: 47px;
  overflow: hidden;
}

.active-section {
  height: auto;
}

.nav-list-item .mat-icon {
  margin-right: 10px;
  font-size: 20px;
}

.mat-button {
  width: 100%;
  height: 100%;
  text-align: left;
  font-weight: 100;
  border-radius: 0px;
  padding: 5px 10px;
}

.mat-drawer-container {
  height: calc(100vh - 87px);
}

.sublinks-ctn {
  margin: 0px 0px 10px 0px;
}

.sublink {
  padding: 0px;
  font-size: 12px;
  padding-left: 48px;
  line-height: 24px;
}

.nav-list-item .sub-link:nth-last-child() {
  margin-bottom: 10px;
}

.mat-expansion-panel {
  background-color: #f7f8fc;
}

.mat-expansion-indicator {
  display: none;
}

.mat-expansion-panel-header {
  padding: 0px;
  height: 46px !important;
}

.mat-expansion-panel-body {
  padding: 0px !important;
}

.mat-expansion-panel {
  box-shadow: none !important;
  width: 100%;
}

.router-content {
  width: calc(100% - 40px);
  margin: 20px;
}