Angular 的汉堡包

Question

我有一个问题，所以这是当我尝试使用“routerLink”通过汉堡包跟踪链接时，汉堡包应该关闭但它不会关闭请帮助我完成此任务 我写了 css 并且它可以正常工作，好吧，即使我将它插入“href”，汉堡包也让我失望 它进入主页而不是 /about

label .menu {
  position: fixed;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #293332;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;

}

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #69D2e7;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 60vw #000007, 0 0 0 60vh #FFF;
  border-radius: 0;
  opacity: 0.9;


}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;

}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;

}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  z-index: 200;

  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}
.navbar-brand {
  font-family:  Copperplate , serif;
  color: red;
  font-weight: Italic;
  background-color: #D4AC0D;
}

.navbar{
  background-color: green;
}

.navbar-dark .navbar-brand {
  color: #380707;
  font-size: 42px;
  padding: 20px;
}

.navbar-nav{
  background-color: #D4AC0D;
}

.bg-dark {
  background-color: #D4AC0D!important
}

.navbar-toggler{
  background-color: brown;
}

.nav-item:hover > .nav-link {
  font-family:  Copperplate , serif;
  font-size: 22px;
  padding: 20px;
  color: red !important;
}

.navbar-collapse {
  font-family:  Copperplate , serif;
  font-size: 25px;
}


.bg-dark{
  background-color: aqua;
}
/*
.nav-link > a:hover {
  font-family: Copperplate , serif;
  font-size: 22px;
  padding: 20px;
  color: green;
}
*/

.navbar-toggler {
  color:white !important;
}

.navbar.collapse {
  display:none;
}

.navbar.show {
  background:white !important;
}

.collapse {
}



    </style>


<script>
menuVisible = false;
toggleMenu() {
  this.menuVisible = !this.menuVisible;
}</script>
<div class=""  mouseover="toggleMenu()" mouseout="toggleMenu()">

<label>
<input type="checkbox">
<span class="menu"> <span class="hamburger"></span> </span>

<ul>
  <li> <a class="u-btn u-button-style u-block-control u-block-adf6-34"  routerLink="/about">Home</a> </li>
  <li> <a class="u-btn u-button-style u-block-control u-block-adf6-34" href="/about">About</a> </li>
   <a class="" href="http://localhost:4200/#/about">Conta</a>
</ul>

</label>


</div>