(fix): don't use document for accessing the topbar

src/app/common/common.module.ts

@@ -125,6 +125,7 @@ import { ShadowboxSubmitButtonComponent } from './components/shadowbox-submit-bu
 import { FormDescriptorComponent } from './components/form-descriptor/form-descriptor.component';
 import { FormToastComponent } from './components/form-toast/form-toast.component';
 import { SsoService } from './services/sso.service';
+import { V2TopbarService } from './layout/v2-topbar/v2-topbar.service';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -403,6 +404,10 @@ PlotlyModule.plotlyjs = PlotlyJS;
       useFactory: router => new RouterHistoryService(router),
       deps: [Router],
     },
+    {
+      provide: V2TopbarService,
+      useFactory: V2TopbarService._,
+    },
   ],
   entryComponents: [
     NotificationsToasterComponent,

src/app/common/layout/v2-topbar/v2-topbar.component.html

@@ -33,7 +33,10 @@
   </a>
 </ng-template>
 
-<div class="m-v2-topbar__Top">
+<div
+  class="m-v2-topbar__Top"
+  [class.m-v2-topbar__noBackground]="!showBackground"
+>
   <div class="m-v2-topbar">
     <div class="m-v2-topbar__Container--left">
       <nav class="m-v2-topbar__Nav">

src/app/common/layout/v2-topbar/v2-topbar.component.ts

@@ -11,6 +11,7 @@ import { Session } from '../../../services/session';
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component';
 import { ThemeService } from '../../../common/services/theme.service';
+import { V2TopbarService } from './v2-topbar.service';
 
 @Component({
   selector: 'm-v2-topbar',
@@ -21,6 +22,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
   minds = window.Minds;
   timeout;
   isTouchScreen = false;
+  showBackground: boolean = true;
 
   @ViewChild(DynamicHostDirective, { static: true })
   notificationsToasterHost: DynamicHostDirective;
@@ -32,12 +34,14 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
     protected session: Session,
     protected cd: ChangeDetectorRef,
     private themeService: ThemeService,
-    protected componentFactoryResolver: ComponentFactoryResolver
+    protected componentFactoryResolver: ComponentFactoryResolver,
+    protected topbarService: V2TopbarService
   ) {}
 
   ngOnInit() {
     this.loadComponent();
     this.session.isLoggedIn(() => this.detectChanges());
+    this.topbarService.setContainer(this);
   }
 
   getCurrentUser() {
@@ -56,6 +60,11 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
     this.componentInstance = this.componentRef.instance;
   }
 
+  toggleBackground(value: boolean) {
+    this.showBackground = value;
+    this.detectChanges();
+  }
+
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/common/layout/v2-topbar/v2-topbar.service.ts

+import { V2TopbarComponent } from './v2-topbar.component';
+
+export class V2TopbarService {
+  private container: V2TopbarComponent;
+
+  static _() {
+    return new V2TopbarService();
+  }
+
+  setContainer(container: V2TopbarComponent) {
+    this.container = container;
+
+    return this;
+  }
+
+  toggleBackground(value: boolean) {
+    if (this.container) {
+      this.container.toggleBackground(value);
+    }
+  }
+}

src/app/modules/homepage/homepage.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { Navigation as NavigationService } from '../../services/navigation';
 import { LoginReferrerService } from '../../services/login-referrer.service';
 import { Session } from '../../services/session';
+import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
 
 @Component({
   selector: 'm-homepage',
@@ -13,8 +14,6 @@ import { Session } from '../../services/session';
 export class HomepageComponent implements OnInit, OnDestroy {
   readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
 
-  topbar: HTMLElement;
-
   minds = window.Minds;
 
   flags = {
@@ -26,11 +25,10 @@ export class HomepageComponent implements OnInit, OnDestroy {
     public title: MindsTitle,
     public router: Router,
     public navigation: NavigationService,
+    public session: Session,
     private loginReferrer: LoginReferrerService,
-    public session: Session
+    private topbarService: V2TopbarService
   ) {
-    this.topbar = document.querySelector('.m-v2-topbar__Top');
-
     this.title.setTitle('Minds Social Network', false);
 
     if (this.session.isLoggedIn()) {
@@ -48,7 +46,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.toggleTopbarBackground(false);
+    this.topbarService.toggleBackground(true);
   }
 
   goToLoginPage() {
@@ -64,7 +62,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   @HostListener('window:resize')
   onResize() {
-    this.toggleTopbarBackground(window.innerWidth > 640);
+    this.topbarService.toggleBackground(window.innerWidth <= 640);
 
     const tick: HTMLSpanElement = document.querySelector(
       '.m-marketing__imageUX > .m-marketing__imageTick'
@@ -77,12 +75,4 @@ export class HomepageComponent implements OnInit, OnDestroy {
       tick.classList.remove('m-marketing__imageTick--right');
     }
   }
-
-  toggleTopbarBackground(value: boolean) {
-    if (value) {
-      this.topbar.classList.add('m-v2-topbar__noBackground');
-    } else {
-      this.topbar.classList.remove('m-v2-topbar__noBackground');
-    }
-  }
 }