I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus.
One issue I'm facing is that currently, clicking anywhere other than the button does not close the displayed menus. I would like it so that clicking anywhere outside the button automatically closes the menus in this Angular Project component.
<div class="row my-row">
<div class="col my-col-1 ">
<input type="checkbox" id="menu" />
<label for="menu" class="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav text-white">
<ul>
<li><a routerLink=""><i class="bi bi-house my-fas"></i> <span class="my-span text-white"> Home</span></a></li>
<li><a (click)="onClick('feature')" ><i class="bi bi-play my-fas"></i> <span class="my-span"> Featured Games</span></a></li>
<li><a (click)="onClick('quickPlay')"><i class="bi bi-play my-fas"></i> <span class="my-span"> Most Played Games</span> </a></li>
<ng-template [ngIf]="permission">
<!-- <li ><a href="#"><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></a></li> -->
<li (click)="onLogout()"><a href="#"><i class="bi bi-power my-fas"></i> <span class="my-span text-white"> Logout</span></a></li>
<li (click)="onLogout()"><a href="#"><i class="bi bi-person-x my-fas"></i> <span class="my-span text-white"> Unsubscribe</span></a></li>
</ng-template>
</ul>
</nav>
</div>
<div class="col my-col-2">
<div *ngIf="allow ; else loggedOut">
<span class="user-name">{{userName}}</span>
<img src="../../../assets/Avatar/1.png" alt="Avatar" class="avatar">
<div class="dropdown dropleft">
<span type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="drop-down" > <i style="color: white;" class="ml-4 bi bi-caret-down"></i></span>
<div class="dropdown-menu " style="margin-right: -50px;margin-top:40px;border-radius: 8px;" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#"><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></a> -->
<a class="dropdown-item" href="http://gamenow.noeticworld.com/unsub-portal"><i class="bi bi-person-x my-fas"></i> <span class="my-span"> Unsubscribe</span></a>
<a (click)="onLogout()" class="dropdown-item" href="#"><i class="bi bi-power my-fas"></i> <span class="my-span"> Logout</span></a>
</div>
</div>
</div>
<ng-template #loggedOut>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Login
</button>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Join Now
</button>
</ng-template>
</div>
</div>