Trouble with double navigation

Hi, I have started a new project and then later added the pro files to it since we upgraded. I'm having trouble adding the double navigation. The top bar is fine but the side nav is not showing. I followed the code that is on your website. Even a copy and paste of the just the code gives me a weird screen. I suspect i either have a file missing from the pro, or i need to import something else. Could you take a look and my angular-cli.json, app.module.ts and the html where i am adding the double navigation.

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "backoffice-web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../scss/mdb.scss",
        "./styles.scss"
      ],
      "scripts": [
        "../node_modules/web-animations-js/web-animations.min.js",
        "../node_modules/chart.js/dist/chart.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/screenfull/dist/screenfull.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
import { BrowserModule } from '@angular/platform-browser';
import { ROUTER_MODULE } from './app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// components
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './footer/footer.component';
import { SigninComponent } from './signin/signin.component';
import { PagingComponent } from './shared/paging/paging.component';

// services
import { LanguageService } from './shared/language.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    FooterComponent,
    SigninComponent,
    PagingComponent
  ],
  imports: [
    BrowserModule,
    ROUTER_MODULE,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModulePro.forRoot(),
    BrowserAnimationsModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [
    LanguageService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <sidenav #sidenav [fixed]="false" *ngIf="isSignedIn">
    <!-- Side navigation links -->
    <li>
      <ul class="collapsible collapsible-accordion">
        <squeezebox [multiple]="false" aria-multiselectable="false">
          <sb-item>
            <sb-item-head ripple-radius><i class="fa fa-chevron-right"></i> Reference Data</sb-item-head>
            <sb-item-body>
              <ul>
                <li><a href="#" class="waves-effect" ripple-radius>Countries/Cities/States</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Languages</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Currencies</a></li>
                <li><a href="#" class="waves-effect" ripple-radius>Sic Codes</a></li>
              </ul>
            </sb-item-body>
          </sb-item>
        </squeezebox>
      </ul>
    </li>
    <!--/. Side navigation links -->
  </sidenav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <nav class="navbar navbar-toggleable-md navbar-dark bg-primary" *ngIf="isSignedIn">
    <!-- SideNav slide-out button -->
    <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
    <!--/. SideNav slide-out button -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx3"
            aria-controls="collapseEx3"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand">
      <strong>Backoffice</strong>
    </a>
    <div class="collapse navbar-collapse" id="collapseEx3">
      <ul class="navbar-nav mr-auto"></ul>
      <form class="form-inline waves-effect waves-light">
        <a class="nav-link">Profile</a>
        <a class="nav-link" (click)="signedIn()">Logout</a>
      </form>
    </div>
  </nav>
  <!--/. Navbar -->

</header>
<!--/.Double navigation-->

<!--Mask-->
<div class="view" [hidden]="isSignedIn">
  <!--Intro content-->
  <div class="full-bg-img flex-center">
    <ul>
      <li>
        <h1 class="h1-responsive">Backoffice</h1>
      </li>
      <li>
        <p>Welcome</p>
      </li>
      <li>
        <button md-ripple type="button" class="btn btn-primary relative" (click)="login.showModal()" ripple-radius>
          Login
        </button>
      </li>
    </ul>
  </div>
  <!--/Intro content-->
</div>
<!--/.Mask-->

<app-home *ngIf="isSignedIn"></app-home>

<app-signin #login></app-signin>

<div class="" [hidden]="true">
  <router-outlet></router-outlet>
</div>

<footer>
  <app-footer></app-footer>
</footer>