<ion-footer>
  <ion-tabs>
    <ion-tab-bar slot="bottom" [ngClass]="{ sangh: activeTab === 'sangh', sant: activeTab === 'sant' }">
      <ion-tab-button (click)="redirect('feed')" [ngClass]="{ active: activeTab === 'feed' }">
        <img src="{{iconBasePath}}{{activeTab !== 'feed' ? 'home-line-icon' : 'home-fill-new'}}.svg">
        <ion-label>Home</ion-label>
      </ion-tab-button>
      <ion-tab-button (click)="redirect('sant')"
        [ngClass]="{ active: activeTab === 'sant', highlight: !!data.sant_menu }">
        <img src="{{iconBasePath}}{{activeTab !== 'sant' ? 'sant' : 'sant-fill-green'}}.svg">
        <ion-label>Sant</ion-label>
      </ion-tab-button>
      <ion-tab-button (click)="redirect('sangh')"
        [ngClass]="{ active: activeTab === 'sangh', highlight: !!data.sangh_menu }">
        <img src="{{iconBasePath}}{{activeTab !== 'sangh' ? 'sangh' : 'sangh-fill-icon'}}.svg">
        <ion-label>Sangh</ion-label>
      </ion-tab-button>
      <ion-tab-button (click)="redirect('friendRequest')"
        [ngClass]="{ active: activeTab === 'friendRequest', highlight: !!data.shravak_menu }">
        <img src="{{iconBasePath}}{{activeTab !== 'friendRequest' ? 'shravak-outline' : 'shravak-fill'}}.svg">
        <ion-label>Shravak</ion-label>
      </ion-tab-button>
      <ion-tab-button (click)="redirect('menu')" [ngClass]="{ active: activeTab === 'menu' }">
        <img src="{{iconBasePath}}{{activeTab !== 'menu' ? 'Menu' : 'menu-shravak'}}.svg">
        <ion-label>Menu</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-footer>