Ionic Angular SideMenu

I've been having problems with my sidemenu content, whenever the contentId="main-content" is inserted the navigated link's content(homepage) is not loaded/visible. But when I remove it, the menu button will be gone but the content of homepage is visible.

app.component.html

<ion-app>
<!-- Side Menu -->
<ion-menu contentId="main-content" type="overlay" class="custom-menu">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Aqua</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<!-- User Info Section with styling -->
<div class="user-info">
<ion-avatar class="avatar">
<img src="../assets/CJ2X2.jpg" alt="User Avatar" />
</ion-avatar>
<h2 class="user-name">Charles Jhaztine <br> Alisasis</h2>
<p class="user-number">2210394112233</p>
</div>

<!-- Menu Items with custom styles -->
<ion-list lines="none">
<ion-item routerLink="/history" routerDirection="root" class="menu-item">
<ion-icon name="book-outline" slot="start"></ion-icon>
<ion-label>Company History</ion-label>
</ion-item>
<ion-item routerLink="/products" routerDirection="root" class="menu-item">
<ion-icon name="pricetags-outline" slot="start"></ion-icon>
<ion-label>About Our Products</ion-label>
</ion-item>
<ion-item routerLink="/cart" routerDirection="root" class="menu-item">
<ion-icon name="cart-outline" slot="start"></ion-icon>
<ion-label>Cart</ion-label>
</ion-item>
<ion-item routerLink="/about" routerDirection="root" class="menu-item">
<ion-icon name="information-circle-outline" slot="start"></ion-icon>
<ion-label>About the App</ion-label>
</ion-item>
<ion-item routerLink="/developers" routerDirection="root" class="menu-item">
<ion-icon name="people-outline" slot="start"></ion-icon>
<ion-label>Developers</ion-label>
</ion-item>
<ion-item routerLink="/contact" routerDirection="root" class="menu-item">
<ion-icon name="mail-outline" slot="start"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>

<!-- Main Content -->
<div id="main-content">
<ion-router-outlet></ion-router-outlet>
</div>
</ion-app>


app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
path: '',
redirectTo: 'homepage',
pathMatch: 'full',
},
{
path: 'folder/:id',
loadChildren: () =>
import('./folder/folder.module').then((m) => m.FolderPageModule),
},
{
path: 'splashscreen',
loadChildren: () =>
import('./splashscreen/splashscreen.module').then(
(m) => m.SplashscreenPageModule
),
},
{
path: 'authentication',
loadChildren: () =>
import('./authentication/authentication.module').then(
(m) => m.AuthenticationPageModule
),
},
{
path: 'login',
loadChildren: () =>
import('./login/login.module').then((m) => m.LoginPageModule),
},
{
path: 'register',
loadChildren: () =>
import('./register/register.module').then((m) => m.RegisterPageModule),
},
{
path: 'history',
loadChildren: () =>
import('./history/history.module').then((m) => m.HistoryPageModule),
},
{
path: 'products',
loadChildren: () =>
import('./products/products.module').then((m) => m.ProductsPageModule),
},
{
path: 'cart',
loadChildren: () =>
import('./cart/cart.module').then((m) => m.CartPageModule),
},
{
path: 'about',
loadChildren: () =>
import('./about/about.module').then((m) => m.AboutPageModule),
},
{
path: 'developers',
loadChildren: () =>
import('./developers/developers.module').then(
(m) => m.DevelopersPageModule
),
},
{
path: 'contact',
loadChildren: () =>
import('./contact/contact.module').then((m) => m.ContactPageModule),
},
{
path: 'homepage',
loadChildren: () =>
import('./homepage/homepage.module').then((m) => m.HomepagePageModule),
},
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
],
exports: [RouterModule],
})
export class AppRoutingModule {}


homepage.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>Aqua</ion-title>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<div class="ad-container">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/modern-minimal-water-bottle-advertising-design-template-4d939eeff0b5740b0a90af87054b96d6_screen.jpg?ts=1645359366" alt="">
</div>

<div class="categories-container p-3">
<h1 class="m-0">Categories</h1>

<div class="scroll-container my-2">
<ion-button class="category-button">Mineral</ion-button>
<ion-button class="category-button">Spring</ion-button>
<ion-button class="category-button">Purified</ion-button>
<ion-button class="category-button">Distilled</ion-button>
<ion-button class="category-button">Sparkling</ion-button>
<ion-button class="category-button">Artesian</ion-button>
</div>

<div class="products-container">
<div class="product">
<img src="https://d2t3trus7wwxyy.cloudfront.net/catalog/product/1/0/10051343---crystal-clear-purified-drinking-water-1l.jpg" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Crystal Clear</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="crystal-clear">Select Size</button>
<ion-modal #modal1 trigger="crystal-clear" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal1)">Cancel</button>
<button class="add" (click)="confirm(modal1)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

<div class="product">
<img src="https://ip.prod.freshop.retail.ncrcloud.com/resize?url=https://images.freshop.ncrcloud.com/1564405684702543777/b2524de8324fddf5b7b874b7b3af741d_large.png&width=512&type=webp&quality=90" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Wilkins</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="wilkins">Select Size</button>
<ion-modal #modal2 trigger="wilkins" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal2)">Cancel</button>
<button class="add" (click)="confirm(modal2)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

<div class="product">
<img src="https://naturespring.sgp1.digitaloceanspaces.com/cms_images/35x2JrYLvCMnhrZ9yFM0M2yS0vLjMgRz5UtDEIUt.jpg" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Nature's Spring</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="nspring">Select Size</button>
<ion-modal #modal3 trigger="nspring" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal3)">Cancel</button>
<button class="add" (click)="confirm(modal3)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

<div class="product">
<img src="https://media.pickaroo.com/media/thumb/variant_photos/2021/3/2/PUuzEKEo5piRp49Bttt74v_watermark_400.jpg" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Absolute</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="absolute">Select Size</button>
<ion-modal #modal4 trigger="absolute" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal4)">Cancel</button>
<button class="add" (click)="confirm(modal4)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

<div class="product">
<img src="https://shopustore.net/cdn/shop/products/SUMMIT350ML.jpg?v=1648094670" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Summit</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="summit">Select Size</button>
<ion-modal #modal5 trigger="summit" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal5)">Cancel</button>
<button class="add" (click)="confirm(modal5)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

<div class="product">
<img src="https://s3.ap-southeast-1.amazonaws.com/control-center.builtamart.com/public/products/5582-002-28-2023-170227-177.jpg?rand=0.6076865970321672" alt="">
<div class="d-flex px-1 justify-content-start mt-3">
<span>Evian</span>
</div>
<div class="d-flex px-1 justify-content-between">
<span>500ml</span>
<span>₱25</span>
</div>
<button class="select-size-btn mt-3" id="evian">Select Size</button>
<ion-modal #modal6 trigger="evian" class="half-height-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title size="medium" class="modal-title">AQUA CART</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1 class="m-0">Select Size</h1>
<ion-list class="mt-1">
<ion-item>
<ion-select aria-label="Bottled Size" value="500mL">
<ion-select-option value="500mL">500mL - ₱25</ion-select-option>
<ion-select-option value="1L">1 Liter - ₱45</ion-select-option>
<ion-select-option value="1.5L">1.5 Liter - ₱70</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<div class="buttons-container mt-4 d-flex justify-content-between">
<button class="cancel" (click)="cancel(modal6)">Cancel</button>
<button class="add" (click)="confirm(modal6)">Add to Cart</button>
</div>
</ion-content>
</ng-template>
</ion-modal>
</div>

</div>
</div>
</ion-content>


I've tried rerouting but it's not working, I think that the Ion-router-outlet is not dynamically changing.

Continue reading...