Fixed double scroll in catalog

src/app/app.component.html

@@ -1,5 +1,5 @@
-
-<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
+<div [ngClass]="{lock: lock, unlock: !lock}">
+    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
         <div class="container">
             <a class="navbar-brand roboto" [routerLink]="['/']">
                 <span class="fh-fade">fh</span>
@@ -39,18 +39,18 @@
                 </div>
             </div>
         </div>
-</nav>
+    </nav>
 
-<!-- Push content down from under nav-->
-<div style="height: 56px"></div>
+    <!-- Push content down from under nav-->
+    <div style="height: 56px"></div>
 
-<!-- Content -->
-<div>
+    <!-- Content -->
+    <div>
         <router-outlet></router-outlet>
-</div>
+    </div>
 
-<!-- Footer -->
-<footer class="d-print-none">
+    <!-- Footer -->
+    <footer class="d-print-none">
         <div class="d-flex py-4 justify-content-center">
             <div class="d-none d-md-inline ml-5 text-left">
                 <h5>MAIN MENU</h5>
@@ -92,4 +92,5 @@
                 </p>
             </div>
         </div>
-</footer>
+    </footer>
+</div>

src/app/app.component.ts

@@ -18,6 +18,10 @@ export class AppComponent implements OnInit {
   @LocalStorage({ defaultValue: [], encryptionKey: 'HmRoBFUEVWqW5uvy' })
   cart: { id: string; item: string; option: POption, quantity: number}[];
 
+  set lock(lock: boolean) {
+    document.getElementsByTagName('body')[0].classList[lock ? 'add' : 'remove']('lock');
+  }
+
   constructor(
     private router: Router,
     private dialog: MatDialog,

src/app/catalog/catalog.component.html

@@ -1 +1 @@
-<iframe class="w-100 border-0" [src]="trust('https://screenprintingsuppliescanada.com')" style="height: 100vh"></iframe>
+<iframe class="w-100 border-0" [src]="trust('https://screenprintingsuppliescanada.com')" style="height: calc(100vh - 56px)"></iframe>

src/app/catalog/catalog.component.ts

@@ -1,16 +1,22 @@
-import {Component, OnInit} from "@angular/core";
-import {HttpClient} from "@angular/common/http";
+import {Component, OnDestroy, OnInit} from "@angular/core";
 import {DomSanitizer} from "@angular/platform-browser";
+import {AppComponent} from "../app.component";
 
 @Component({
     selector: 'catalog',
     templateUrl: 'catalog.component.html'
 })
-export class CatalogComponent implements OnInit{
+export class CatalogComponent implements OnInit, OnDestroy {
 
-    constructor(private http: HttpClient, private sanatize: DomSanitizer) {}
+    constructor(private app: AppComponent, private sanitize: DomSanitizer) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.app.lock = true;
+    }
 
-    trust(url) { return this.sanatize.bypassSecurityTrustResourceUrl(url); }
+    ngOnDestroy() {
+        this.app.lock = false;
+    }
+
+    trust(url) { return this.sanitize.bypassSecurityTrustResourceUrl(url); }
 }

src/assets/css/base.scss

@@ -24,6 +24,10 @@ body {
   margin: 0;
   padding: 0;
   background-color: #292929;
+
+  &.lock {
+    overflow: hidden;
+  }
 }
 
 .button-fix {