ng-sidebar with custom width keeps taking up space even after navigation

[biswa1shaw]

I have modified the style of the ng-sidebar with a custom width. Upon Logout, I am switching the sidebar visible boolean variable to false and navigating back to login page again.
In this scenario, the left padding of the sidebar remains, taking up space on the login page and shifting everything to the right. Seems like the action which sets the padding to 0 does not fire.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from './_services/authentication.service';
import { User } from './_models/user';

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentUser: User;
  showSidebar = true;

  constructor(
    private router: Router,
    private authenticationService: AuthenticationService
  ) {}

  ngOnInit() {
    this.authenticationService.currentUser.subscribe(x => {
      this.currentUser = x;
      this.showSidebar = !this.currentUser ? false : true;
      console.log('this.showSidebar', this.showSidebar);
    });
  }

  logout() {
    this.authenticationService.logout();
    this.router.navigate(['/login']);
  }
}

global style applied in styles.css

/* Add application styles & imports to this file! */

/* Add application styles & imports to this file! */
.ng-sidebar {
  width: 20rem;
  box-shadow: 10px 0px 10px -5px rgba(229, 232, 232, 1);
}

.ng-sidebar--left {
  padding-top: 70px;
  width: 20rem;
}

app.component.html

<ng-sidebar-container style="height: 100vh;">
  <!-- A sidebar -->
  <ng-sidebar
    #sidebar
    [(opened)]="showSidebar"
    mode="push"
    autoCollapseWidth="500"
    *ngIf="currentUser"
  >
    <!--Various ul/li for options -->
  </ng-sidebar>

  <!-- Page content -->
  <div ng-sidebar-content>
    <div class="p-grid" *ngIf="currentUser">
      <div class="p-col" id="layout-topbar">
        <a
          href="javascript:void(0)"
          class="menu-button pi pi-bars"
          (click)="showSidebar = !showSidebar"
        ></a>
        <a href="javascript:void(0)" class="menu-button" routerLink="/"
          >Asset Registry Management</a
        >

        <ul class="topbar-menu">
          <li>
            <a href="javascript:void(0)" (click)="logout()">Logout</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- main app container -->
    <div class="p-col main-content-padding">
      <router-outlet></router-outlet>
    </div>
  </div>
</ng-sidebar-container>