Ionic menu show after toggle but not clickable - html

Question

(Disclaimer: I am still very new to ionic and coding in general, if any terminology below is wrong please let me know as part of my learning process. Thanks in advance for help)
Problem: Sidemenu show after is pressed, but the menu cannot be clicked
Background: I have an ionic project setup with side menu in split pane. It was structured with a separate ionic page for the menu, route directly from root page to lazy-load the menu page, then from there the menu routing module handle the child route to display different pages.
I have these setup up by following through this youtube tutorial https://www.youtube.com/watch?v=I82_roQSgco
Long story short, after building up my app and now wanting to setup route guard, I personally found it makes no sense to have an empty app component and route to a menu as an entry point. So I want to move the menu and the routing logic back into the app component and app routing.
Everything seems fine with the migration, except for the side-menu. the side-menu will show if I press the menu toggle button, but the buttons in the menu are unclickable as if there is another element overlay on top of it. However, if I use a full width browser, where the menu is not hidden in the first place, it works just fine.
I simply moved everything in the html template from the menu page into that of the app component html template within the tab.
I spent hours troubleshooting with reference to the default side-menu app and my previously working strategy, and I still cannot figure out why I cannot click the menu.
code attached below, any help appreciated
app-routing.module.ts
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
import { AngularFireAuthGuard, redirectUnauthorizedTo } from "#angular/fire/auth-guard";
import { AppComponent } from './app.component';
const redirectToLogin = () => redirectUnauthorizedTo(['login']);
const routes: Routes = [
{
//authguard to be implement in the root path
path: '',
component:AppComponent,
children:[
{
path: 'users',
loadChildren: './pages/users/users.module#UsersPageModule'
},
{
path: 'students',
loadChildren: './pages/students/students.module#StudentsPageModule'
},
{
path: '',
loadChildren: './pages/home/home.module#HomePageModule'
},
]
},
{
//redirect to login page if not logged in
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule'
}
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<ion-app>
<ion-split-pane contentId ="content">
<ion-menu contentId="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor = "let p of pages">
<ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
{{p.title}}
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
</ion-app>
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Platform } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { Router, RouterEvent } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit{
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router:Router,
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
pages = [
{
title:'Home',
url:''
},
{
title:'Students',
url:'students'
},
{
title:'Users',
url:'users'
}
]
selectedPath = '';
ngOnInit(){
this.router.events.subscribe((event:RouterEvent) =>{
this.selectedPath = event.url;
});
}
}
home.page.html (an empty home page with the ion-menu-button)
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>

Answer 1

You are forcing your router-outlet to use App-component as a component, when App-component is loaded by default. Easy solution is to change your routes const
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'users',
loadChildren: './pages/users/users.module#UsersPageModule'
},
{
path: 'students',
loadChildren: './pages/students/students.module#StudentsPageModule'
},
{
path: '',
loadChildren: './pages/home/home.module#HomePageModule'
},
];
for sub component inside router i suggest you to watch this video: https://youtu.be/hkaa2mnqOI8