treetrail-frontend/src/app/nav/nav.component.scss

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 150px;
}

.sidenav {
  background-color:rgba(250, 255, 220);
}

.mat-drawer-container {
  background-color: inherit;
}

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

.mat-toolbar {
  padding: 0;
  height: 2em;
}

.mat-toolbar .appTitle {
  font-family: TenderLeaf;
  font-style: italic;
  font-weight: lighter;
  font-variant-caps: petite-caps;
  text-shadow: 5px 3px 5px #3e371c81;
  opacity: .9;
}

.mat-toolbar app-message {
  padding: 1em;
}

.mat-icon {
  padding-right: 0.5em;
  vertical-align: bottom;
}

.mat-toolbar {
  // Angular build cannot find the asset: removing for now
  //background-image: url("assets/img/banner.jpg");
  background-color: #a9b15070;
  background-size: contain;
  border-bottom: groove;
  border-color: rgb(187 210 186 / 70%);
  font-weight: 700;
}

.mat-toolbar .mat-icon {
  vertical-align: baseline;
}

.appTitle {
  margin: auto;
  height: inherit;
  display: flex;
  align-items: center
}

.appTitle img {
  height: inherit;
}

.qrcode {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  img {
    height: 5em;
  }
}

:host ::ng-deep {
  .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }
  .mdc-line-ripple {
    display: none;
  }

  //.sidenav .mat-drawer-inner-container {
    //background-image: url('assets/img/sidebar.jpg');
    //background-position: center;
  //}

  .mat-sidenav-content > :last-child {
    overflow: auto;
    height: inherit;
  }
}