Как скрыть сиденав по угловой навигации?

Question

Я использую тему Now ui kit, и я столкнулся с проблемой, пока я нажимаю на sidenav, она не закрывается автоматически в мобильном представлении, пожалуйста, подскажите, как мне это сделать. Он работает на кнопках переключения, но не на ссылках.

Вот мой HTML-код

<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="400">
  <div class="container">
    <div class="navbar-translate">
      <a class="navbar-brand" href="" rel="tooltip" title="" data-placement="bottom" target="_blank"
        data-original-title="Designed by Invision. Coded by Creative Tim">
        Now Ui Kit
      </a>
      <button class="navbar-toggler navbar-toggler" type="button" aria-controls="navigation-index" aria-expanded="false"
        aria-label="Toggle navigation" (click)=sidebarToggle();>
        <span class="navbar-toggler-bar top-bar"></span>
        <span class="navbar-toggler-bar middle-bar"></span>
        <span class="navbar-toggler-bar bottom-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navigation"
      data-nav-image="../assets/img/blurred-image-1.jpg">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/']" routerLinkActive="active"
            [routerLinkActiveOptions]="{ exact: true }">About me</a>
        </li>
        <li class="nav-item">
          <a [routerLink]="['/experience']" routerLinkActive="active" class="nav-link">Experience</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Education</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Skills</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Interests</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Вот функция, которую я использую для запуска sidenav на мобильном представлении

export class HeaderComponent implements OnInit {
  private toggleButton: any;
  private sidebarVisible: boolean;

  constructor(private element: ElementRef) {
    this.sidebarVisible = false;
  }

  ngOnInit() {
    const navbar: HTMLElement = this.element.nativeElement;
    this.toggleButton = navbar.getElementsByClassName('navbar-toggle')[0];
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('profile-page');
  }

  sidebarOpen() {
    const toggleButton = this.toggleButton;
    const html = document.getElementsByTagName('html')[0];
    setTimeout(() => {
      toggleButton.classList.add('toggle');
    }, 500);
    html.classList.add('nav-open');
    this.sidebarVisible = true;
  }

  sidebarClose() {
    const html = document.getElementsByTagName('html')[0];
    this.toggleButton.classList.remove('toggled');
    this.sidebarVisible = false;
    html.classList.remove('nav-open');
  }

  sidebarToggle() {
    // tslint:disable-next-line: no-unused-expression
    if (this.sidebarVisible === false) {
      this.sidebarOpen();
    } else {
      this.sidebarClose();
    }
  }
}

Любое решение приветствуется!