first commit

src/app/nav/nav.component.scss

@@ -0,0 +1,98 @@
+.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;
+  }
+}