fix sidebar toggle

Author: Klath123

src/app/app.component.css

@@ -7,9 +7,11 @@
   flex-direction: column;
   align-items: center;
 }
+
 .tag-title {
   font-size: 0.9em;
 }
+
 .tag-subtitle {
   font-size: 0.7em;
 }
@@ -18,13 +20,16 @@
 
 .main-container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
 }
 
 .sidenav-content {
   display: flex;
   padding: 10px;
   justify-content: space-between;
+  width: 100%;
+  min-height: 60px;
+  box-sizing: border-box;
 }
 
 .sidenav-menu {
@@ -38,15 +43,16 @@
   background: transparent;
   border: 0;
   color: #ddd;
+  cursor: pointer;
 }
 
 .github-fork-ribbon:before {
   background-color: #333;
 }
 
 @media only screen and (max-width: 750px) {
-    .github-fork-ribbon {
-        display: none;
-      }
-    
-}
+  .github-fork-ribbon {
+    display: none;
+  }
+
+}

src/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-drawer-container class="main-container" autosize>
-  <mat-drawer #drawer class="sidenav-menu" mode="side" opened="{{ menuIsOpen }}">
+  <mat-drawer #drawer class="sidenav-menu" mode="side" [opened]="menuIsOpen">
     <button class="menu-close" (click)="toggleMenu()">
       <mat-icon class="white-icon">close</mat-icon>
     </button>
@@ -8,23 +8,18 @@
   </mat-drawer>
 
   <div class="sidenav-content">
-    <button type="button" mat-button (click)="toggleMenu()" color="primary">
+    <button *ngIf="!menuIsOpen" type="button" mat-button (click)="toggleMenu()" color="primary">
       <mat-icon>menu</mat-icon>
     </button>
     <div class="tag-line">
       <div class="tag-title">{{ title || defaultTitle }}</div>
       <div class="tag-subtitle">{{ subtitle }}</div>
     </div>
     <div class="dummy"></div>
-    <a
-      target="_blank"
-      class="github-fork-ribbon"
-      href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
-      data-ribbon="Fork me on GitHub"
-      title="Fork me on GitHub"
-      >Fork me on GitHub</a
-    >
+    <a target="_blank" class="github-fork-ribbon"
+      href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel" data-ribbon="Fork me on GitHub"
+      title="Fork me on GitHub">Fork me on GitHub</a>
   </div>
   <mat-divider></mat-divider>
   <router-outlet></router-outlet>
-</mat-drawer-container>
+</mat-drawer-container>