Fix toolbar styling

src/app/app.component.css

@@ -0,0 +1,11 @@
+mat-toolbar {
+    background-color: #303030;
+    box-shadow: none;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    position: sticky;
+    top: 0;
+    z-index: 999999;
+  }
+  
+  

src/app/app.component.html

@@ -14,10 +14,10 @@
   <mat-sidenav-content>
     <mat-toolbar>
       <span>
-        <a mat-button [hidden]="!backEnabled" (click)="goBack()">
+        <a mat-icon-button *ngIf="backEnabled" (click)="goBack()">
           <mat-icon>arrow_back</mat-icon>
         </a>
-        <a mat-button [hidden]="backEnabled" (click)="sidenav.open()">
+        <a mat-icon-button *ngIf="!backEnabled" (click)="sidenav.open()">
           <mat-icon>menu</mat-icon>
         </a>
       </span>

src/app/budgets/budget.component.ts

@@ -47,6 +47,4 @@ export class BudgetsComponent implements OnInit {
       }
     )
   }
-
-
 }

src/styles.css

@@ -13,10 +13,6 @@ p {
   margin: 0;
 }
 
-a.mat-button[hidden] {
-  display: none;
-}
-
 a.mat-fab {
   position: fixed;
   right: 2em;
@@ -28,37 +24,30 @@ a.mat-fab {
   color: #BDBDBD
 }
 
-mat-toolbar {
-  box-shadow: 0px 3px 3px 1px #212121;
-  position: sticky;
-  top: 0;
-  z-index: 999999;
-}
-
 mat-toolbar.mat-toolbar-row,
 mat-toolbar.mat-toolbar-single-row {
   padding: 0;
 }
 
-mat-toolbar span {
+mat-toolbar > span {
   display: flex;
   width: 33%;
   ;
 }
 
-mat-toolbar span:nth-child(1) {
+mat-toolbar > span:nth-child(1) {
   justify-content: flex-start;
 }
 
-mat-toolbar span:nth-child(2) {
+mat-toolbar > span:nth-child(2) {
   justify-content: center;
 }
 
-mat-toolbar span:nth-child(3) {
+mat-toolbar > span:nth-child(3) {
   justify-content: flex-end;
 }
 
-mat-toolbar a.mat-button {
+/* mat-toolbar a.mat-button {
   font-size: 1em;
 }
 
@@ -69,7 +58,7 @@ mat-toolbar a.mat-button .mat-icon {
 mat-toolbar mat-icon {
   vertical-align: middle;
   cursor: pointer;
-}
+} */
 
 mat-toolbar .action-item {
   font-weight: normal;