Angular - Sliding sidebar sometimes does not register the first click

Question

I have implemented a sliding sidebar in my web-app for mobile users. The sliding listener is imported from hammerjs.

<app-nav-bar></app-nav-bar>
<div class="site-content">
<div class="content-container" (swiperight)="onSwipeRight()" (swipeleft)="onSwipeLeft()">
  <div class="sidebar" [class.active]="displaySidebar">
    <div class="active-sidebar">
      <img src="/assets/images/close_w.png" alt="Close" class="close-icon" (click)="hideSideBar()"/>
      <app-date-bar></app-date-bar>
      <app-search-bar></app-search-bar>
      <br>
      <!-- Smaller Table for Football Leagues -->
      <app-football-leagues></app-football-leagues>
    </div>
  </div>

  <div class="main-content">
    <section *ngFor="let sport of orderedSports">
       .......

With the css being

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    display: block;
    left: -100%; /* Start off-screen */
    top: 0;
    height: 100%;
    width: 75%;
    transition: left 0.1s ease;
    z-index: 1000;
    background-color: #aaa; /* Your chosen background color */
    padding: 10px; /* Adjust as needed */
    box-sizing: border-box; /* To include padding in width and height */
    margin-top: 0;
  }
  
  .sidebar.active {
    left: 0; /* Slide in */
    background-color: #ccc;
    border: 5px solid green;
    margin-left: 0;
    padding-top: 80px;
    overflow-y: auto;
  }

  .sidebar,
  .sidebar.active {
    box-sizing: border-box;
  }

  .close-icon{
    display: block;
  }

  .main-content{
    margin: auto;
    padding: 0;
    margin-top: 20px;
  }

  .league-name{
    text-align: center;
  }
}

Currently when I slide the sidebar open the sidebar displays properly, however it does not register the first click, whether it be on the close button, or the search-bar or the date-bar or the football-leagues. After the first click(or swipe) on the sidebar, all the subsequent clicks work properly.

I tried logging the touchstart of the clicks as I thought maybe the sidebar was not yet loaded. However it registers touchstarts properly. I then logged the composedPath of the first (non working) and second click (working) on a button from my football-leagues, however both clicks had the same composedPath.

I also tried removing the transition but that didn't fix the problem either.

I have also tried asking a couple of my friends but non of them have any clue what's going on either.