Get menu working on mobile

ngx-joeljca-blogapp-2/src/app/layout/header/header.component.html

@@ -1,21 +1,48 @@
 <header [class]="headerClasses()">
   <div class="container px-3">
-    <a routerLink="/" class="navbar-brand pe-3">
+
+    <a 
+      class="navbar-brand pe-3"
+      routerLink="/">
       Joel Johnston
     </a>
-    <div id="navbarNav" class="offcanvas offcanvas-end bg-dark">
+
+    <div 
+      id="navbarNav" 
+      class="offcanvas offcanvas-end bg-dark" 
+      [class.show]="showMenu"
+      [class.navbar-dark]="showMenu">
+
       <div class="offcanvas-header border-bottom border-light">
         <h5 class="offcanvas-title text-white">Menu</h5>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button type="button" class="btn-close btn-close-white" (click)="disableMenu()"></button>
       </div>
+
       <div class="offcanvas-body">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <ng-container *ngFor="let item of navigationItems()">
             <app-nav-link [navItem]="item">Services</app-nav-link>
           </ng-container>
         </ul>
       </div>
+
     </div>
-    <app-theme-switcher></app-theme-switcher>
+
+    <app-theme-switcher>
+    </app-theme-switcher>
+
+    <button 
+      type="button" 
+      class="navbar-toggler" 
+      (click)="toggleMenu()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div 
+      class="offcanvas-backdrop fade show" 
+      *ngIf="showMenu" 
+      (click)="disableMenu()">
+    </div>
+
   </div>
 </header>

ngx-joeljca-blogapp-2/src/app/layout/header/header.component.ts

@@ -19,6 +19,7 @@ export class HeaderComponent implements OnInit {
     this.router.events.subscribe(event => {
       if (event instanceof ActivationEnd) {
         const data = event.snapshot.data;
+        this.disableMenu();
         if (data['darkHeader'])
           this.darkHeader = true;
         else
@@ -27,6 +28,10 @@ export class HeaderComponent implements OnInit {
     });
   }
 
+  disableMenu() {
+    this._showMenu = false;
+  }
+
   navigationItems(): NavigationItem[] {
     return this.navigation.getNavigationItems();
   }
@@ -38,6 +43,15 @@ export class HeaderComponent implements OnInit {
       return "header navbar navbar-expand-lg bg-light shadow-sm shadow-dark-mode-none fixed-top";
   }
 
+  toggleMenu() {
+    this._showMenu = !this._showMenu;
+  }
+
+  get showMenu(): boolean {
+    return this._showMenu;
+  }
+
   public darkHeader: boolean = false;
 
+  private _showMenu = false;
 }