I have created 2 side drawer menus in angular app which display on different pages within the angular app. Menu 2 includes more links which are displayed when the user logs in. However, if you click on the homepage in the side menu after logging in (which has menu 1 without the logged in extras currently) it logs out and reverts back to the standard menu.

How do I select the menu that displays on each page depending on whether the user is logged in or not? Not everyone will be logging into this app, in fact vast majority wont log in, hence I don't want the homepage to be the login screen.

Any ideas would be hugely welcome! Not sure if you need to see any code I have written but if so just let me know what is relevant. Many thanks

code implemented is:

authentication.service.ts

```
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { User } from '../../app/services/user';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';

@Injectable( {
 providedIn: "root"
})
export class AuthenticationService {

public isLoggedIn = false;

```

app.component.ts

```
constructor(public authentication: AuthenticationService) {}

```

app.component.html

```
<ion-app>
<div *ngIf="authentication.isLoggedIn">
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay" menuId="menu">
   <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle menu="menu" auto-hide="false" *ngFor="let p of 
navigate">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</div>
<div *ngIf="!authentication.isLoggedIn">
<ion-split-pane contentId="main-content2">
<ion-menu contentId="main-content2" type="overlay" menuId="menu2">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle menu="menu2" auto-hide="false" *ngFor="let p of   
 navigate2">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="main-content2"></ion-router-outlet>
</ion-split-pane>
</div>
</ion-app>

```

the menu works for when loading the app but when I login, the menu for when logged out still shows, have I done something wrong above? Many thanks