Hamburger for Angular

I have a problem, so this is when I try to follow a link through a hamburger using “routerLink” the hamburger should close but it won’t close Plz help me for this task
I wrote css and it works as it should, well, the hamburger lets me down even if I insert it “href”
it goes to the main page and not to /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>