Навигация не закрывается после навигации по угловому роутеру

Question

В моем приложении Angular добавлена ​​навигация по гамбургеру. Проблема в том, что при переходе от маршрутизатора через навигационную систему navdiv зависает и не закрывается автоматически. Я создал это с помощью CSS без использования jquery. Что нужно сделать, чтобы исправить это, мне нужно добавить JS-код в мой файл контроллера Nav. Создаем скриншоты для лучшего понимания проблемы.

ЭКРАН 1 Компонент: Home

Экран 2 Компонент: квитанция (Nav Div застрял. Не закрывается)

NAV.COMPONENT.HTML

<header tabindex="0">
  <h4>{{ pagename }}</h4>
  <a (click)="winBack()">Back</a>
</header>
<div id="nav-container">
  <div class="bg"></div>
  <div class="button" tabindex="0">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
  <div id="nav-content" tabindex="0">
    <ul>
      <li *ngFor="let nav of navs; let i = index">
        <a (click)="route(i)"><i :class="{{nav.fa}}"></i>&nbsp; {{nav.name}}</a>
      </li>
      <li><a routerLink="/app1/three"><i class="fa fa-camera"></i>&nbsp; Scanner</a></li>
      <li style="margin-top:15px;"><a><i class="fa fa-user"></i>&nbsp; {{ logname }}</a>
      <li (click)="logOut()"><a><i class="fa fa-sign-out"></i>&nbsp; Logout</a></li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet>

NAV.COMPONENT.TS (только часть маршрутизации)

  route(i){
    console.log(i)
    if (i == 0) this.router.navigate(["/app1/home"])
    else if (i == 1) this.router.navigate(["/app1/receipt"])
    else if (i == 2) this.router.navigate(["/app1/issue"])
    else if (i == 3) this.router.navigate(["/app1/transfer"])
    else if (i == 4) this.router.navigate(["/app1/summary"])
  }

NAV.COMPONENT.CSS

#nav-container {
  position: fixed;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index:99;
  top:0;
}
#nav-container .bg {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: calc(100% - 60px); /* Full height (cover the whole page) */
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6); /* Black background with opacity */
  cursor: pointer; /* Add a pointer on hover */
}
#nav-container:focus-within .bg {
  display:block;
  opacity: .6;
  pointer-events: none;
}
#nav-container * {
  visibility: visible;
}

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 60px;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
  margin-left: 20px;
  touch-action: manipulation;
  color:#fff;
  outline:0;
}
.icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  transition: .3s;
}
.icon-bar + .icon-bar {
  margin-top: 5px;
}

#nav-container:focus-within .button {
  pointer-events: none;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(45deg);
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-8px,0) rotate(-45deg);
}

#nav-content {
  margin-top: 60px;
  padding-left: 0;
  width: 90%;
  max-width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  background: #fff;
  pointer-events: auto;
  transform: translateX(-100%);
  transition: transform .3s;
  will-change: transform;
  contain: paint;
  overflow: hidden;
}

#nav-content ul {
  height: 100%;
  float:left;
  margin-left:-30px;
  list-style-type: none;
}
#nav-content ul li {
  border-bottom: 1px solid #e4e4e4;
  padding:1px;
}
#nav-content li a {
  padding: 7px 2px;
  display: block;
  transition: color .1s;
  color:#000;
  cursor:pointer;
  text-decoration: none;
}

#nav-content li a:hover {
  color: #cd0000;
  text-decoration: none;
}

#nav-content li:not(.small) + .small {
  margin-top: auto;
}

#nav-container:focus-within #nav-content {
  transform: none;
}