Ionic menu for logged pages is not appearing - ionic-framework

Question

I want to show a menu template on ionic app but i want first of all a login page and then, when the user is logged, show the ionic template.
Now i have in app.routing.module that if the user is not logged, the app redirects to the loginPage and if the user is logged, redirects to pages routing module where there are many pages like the home page '' = '/home':
App.routing.module
const routes: Routes = [
{ path: '',
loadChildren: () => import('./pages/pages.module').then( m => m.PagesPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule),
...canActivate(redirectLoggedInToHome)
},
];
pages-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'appointments',
loadChildren: () => import('./appointments/appointments.module').then(m => m.AppointmentsPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
];
The app.component:
<ion-app>
<!-- Content -->
<ion-router-outlet id="app"></ion-router-outlet>
<!-- !Content -->
</ion-app>
The login page:
<div class="login">
<ion-card>
<ion-card-content>
<form [formGroup]="loginForm" (ngSubmit)="login()">
<!-- Email -->
<app-base-input label="email.label" [control]="email" errorMessage="email.notValid" formControlName="email">
</app-base-input>
<!-- Password -->
<app-base-input type="password" label="password.label" [control]="password" errorMessage="password.notValid"
formControlName="password"></app-base-input>
<!-- Button -->
<ion-button expand="full" type="submit">{{ 'login.label' | translate }}</ion-button>
</form>
</ion-card-content>
</ion-card>
</div>
Im including the menu on pagePage.component.html that has the pages inside but is not showing the menu.
<!-- Menu -->
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>{{ 'appName' | translate }}</ion-list-header>
<ion-note>hi#ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-outline'"></ion-icon>
<ion-label>{{ p.title | translate }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- !Menu -->
<ion-router-outlet id="main-content"></ion-router-outlet>
How can i add a menu in logged pages?

Answer 1

I'm not really sure what your goal is, but if you just want to show an ion-menu, then you just add it at the next page after the login.
This is an example:
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button autoHide="true"></ion-menu-button>
</ion-buttons>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-button routerLink="/appointment" fill="clear">Appointments</ion-button>
</ion-item>
<ion-item>
<ion-button routerLink="/customer" fill="clear">Customer</ion-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-item>
<ion-button fill="clear" (click)="signOut()">Abmelden</ion-button>
</ion-item>
</ion-footer>
</ion-menu>
It's between
<ion-header></ion-header>
//ion-menu here!
<ion-content></ion-content>
If you like to display a menu in your login page then do it with an *ngIf.
userlogin: Boolean = false
Do your login and set userlogin to true.