I am running into an issue where it appears the sidenav is undefined at some point on page reload or window resizing, yet functionally it seems to behave properly. I mimicked the MDB Navigation example for use in my project.

Context for my application I have two separate navs depending on whether the user is logged in or not. I have a plain navbar for the public facing page, and a double nav (sidenav + navbar) for logged in users. I switch between these two with a "logged-in" check using an ngIf in the html. Shown here:

Because of this functionality, I cannot use the "!" or "static: true" when defining the viewchild in the ts. I believe this is where at least part of this issue stems from.

Here is the sidenav tag in the html:

<ng-template #loggedIn>
<mdb-sidenav-layout>
  <mdb-sidenav
    #tagsSidenav="mdbSidenav"
    id="tags-sidenav"
    [mode]="mode"
    [hidden]="hidden"
    [accordion]="true"
  >
    <a
      class="d-flex justify-content-center py-4"
      routerLink="/home"
      mdbRipple
      rippleColor="primary"
    > etc...

And here are the mode and hidden boolean declarations in the .ts file, as well as the runOutsideAngular function (within ngAfterViewInit as in the documentation):

public mode = window.innerWidth >= 1400 ? 'side' : 'over';
public hidden = window.innerWidth >= 1400 ? false : true;
...
this.ngZone.runOutsideAngular(() => {
  fromEvent(window, 'resize').subscribe(() => {
    if (window.innerWidth < 1400 && this.mode !== 'over') {
      this.ngZone.run(() => {
        this.mode = 'over';
        if (this.isLoggedIn) {
          this.loggedInPadding = false;
        }
        if (this.sidenavComp !== undefined) {
          this.hideSidenav();
        }
      });
    } else if (window.innerWidth >= 1400 && this.mode !== 'side') {
      this.ngZone.run(() => {
        this.mode = 'side';
        if (this.isLoggedIn) {
          this.loggedInPadding = true;
        }
        if (this.sidenavComp !== undefined) {
          this.showSidenav();
        }
      });
    }
  });
});

And while I believe I have everything setup correctly, whenever I reload a page, or resize it over the sidenav breakpoint, it throws several different TypeError: Cannot read properties of undefined for mode, transitionDuration, and sidenavTransitionDuration. In the error, it appears they stem from the MdbSidenavLayoutComponent.toggleBackdrop function.

Is there something wrong in how I setup the sidenav? Would a better option instead be to have one nav setup in the header, and on the public facing page, keep the sidebar hidden and change the content of the navbar, rather than having two separate navs? Again, functionally, it seems to work fine. The sidenav does hide and show as expected, but I'm not sure if it is actually changing the mode correctly as on smaller screens, after I click the toggle button to reveal the sidebar, the screen does not darken, and I cannot re-hide the sidebar unless I navigate to a new page using one of the links in the sidebar.

Resources (screenshots, code snippets etc.)