ion-menu does not work properly sometimes

Published

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>

Source: Angular Questions

Published
Categorized as angular, angular-universal, ionic-framework Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq