ion-menu does not work properly sometimes

I'm facing issue with ion-menu. It is not enabled sometimes, so ion-menu-toggle is hidden then. I used autoHide="false" to enforce menu toggle button's display. But if it is enforced, links inside menu aren't clickable. Please note that issue is not all the time, it may occur at first page load and may not occur with another page load, that makes it strange.

App Stack: Ionic, Angular, Angular Universal for SSR

home.component.html

<ion-app>
  <app-main-menu></app-main-menu> <-! here menu is -->

  <ion-content class="ion-page home" id="main-content">
    <div id="top">
      <div id="topContent">
        <ion-toolbar>
          <ion-grid>
            <ion-row class="ion-justify-content-around">
              <ion-col [size]="2">
                <!-- BELOW IS THE TOGGLE -->
                <ion-menu-toggle menu="start" autoHide="false">
                  <ion-button fill="clear" color="light">
                    <ion-icon name="reorder-three-outline" class="skr-sqr3"></ion-icon>
                  </ion-button>
                </ion-menu-toggle>
              </ion-col>

              <ion-col class="right-aligned" size="10">
                <ion-title class="logo logo-bold" color="light">SKRAMBLA.</ion-title>
                <p class="ion-no-padding ion-no-margin skr-text-light" style="padding-right: 15px;">TRAVEL SEARCH ENGINE
                </p>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-toolbar>

        <ion-content class="ion-padding">
          <ion-grid>
            <ion-col size="12">
              <div class="d-flex flex-row align-items-center p-1 border rounded-pill p-2 mx-1 search-bar"
                (click)="showSearch()" *ngIf="!search">
                <ion-icon name="search-outline" color="light" class="skr-sqr2 px-2"></ion-icon>

                <div class="skr-text-light skr-fs0 px-2">
                  Search for attractions, event or activities
                </div>
              </div>
            </ion-col>
          </ion-grid>
        </ion-content>
      </div>
    </div>

    <ion-content scrollX="true" id="bottom">
      <app-features></app-features>
    </ion-content>


    <div>
      <app-upcoming-events></app-upcoming-events>
    </div>

    <app-footer></app-footer>
  </ion-content>
  <app-search *ngIf="search"
    [config]="searchConfig"
    [search]="showSearch()"
    (close)="hideSearch()"
    animated></app-search>
</ion-app>

menu.component.html

<app-side-menu contentId="main-content" side="start">
  <ion-grid slot="header">
    <ion-row *ngIf="!loggedIn">
      <ion-col size="12">
        <ion-text color="secondary">
          <p class="logo logo-bold skr-fs3">SKRAMBLA.</p>
        </ion-text>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid slot="content">
    <ion-row class="ion-no-padding" *ngIf="loggedIn">
      <ion-col [size]="4" class="ion-no-padding">
        <ion-icon name="person-circle-outline" style="width: 100%; height: 100%;"></ion-icon>
      </ion-col>
    </ion-row>

    <ion-row class="ion-padding" *ngIf="loggedIn">
      <ion-col size="12">
        <b>{{ user.firstName }} {{ user.lastName }}</b>
      </ion-col>
      <ion-col size="12">
        <span>{{ user.email }}</span>
      </ion-col>
    </ion-row>

    <ion-row class="ion-padding py-0" *ngIf="loggedIn">
      <ion-col size="12">
        <a routerLink="/auth/profile" class="text-dark">Profile</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">Saved Items</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">My bookings</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/auth/settings" class="text-dark">Settings</a>
      </ion-col>

      <ion-col size="12">
        <hr>
      </ion-col>
    </ion-row>

    <ion-row class="ion-padding">
      <ion-col size="12" *ngIf="!loggedIn">
        <a routerLink="/auth/login" class="text-dark">Login</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">Services</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">Insights</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">Press</a>
      </ion-col>

      <ion-col size="12">
        <a routerLink="/" class="text-dark">Contact</a>
      </ion-col>
    </ion-row>

    <ion-row class="ion-padding" *ngIf="loggedIn">
      <ion-col>
        <ion-icon name="log-out-outline" color="secondary"></ion-icon>
        <a routerLink="/auth/logout" style="margin-left: 2px">
          <ion-text color="secondary">
            <span>Logout</span>
          </ion-text>
        </a>
      </ion-col>
    </ion-row>
  </ion-grid>
</app-side-menu>

side-menu.component.html

<ion-menu [menuId]="menuId" [side]="side" [contentId]="contentId">
  <ion-header>
    <ion-grid>
      <ion-row class="align-items-center">
        <ion-col size="3">
          <ion-menu-toggle>
            <ion-button fill="clear" color="secondary">
              <ion-icon name="chevron-back-outline" *ngIf="side == 'start'"></ion-icon>
              <ion-icon name="chevron-forward-outline" *ngIf="side == 'end'"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-col>

        <ion-col size="9">
          <slot name="header"></slot>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-header>

  <ion-content>
    <slot name="content"></slot>
  </ion-content>
</ion-menu>