Hello!
I am creating an application with two pages: a home page(displaying different workspaces), and a page for editing a workspace once it is clicked.
The home page uses the standard <ion-menu>, while the workspace page uses the standard <ion-split-pane>.
I am navigating between the two pages with a button press. To navigate to the workspace page:
goToWorkspace() {
this.route.navigate(["/workspace"]);
}
And, to navigate from the workspace page back to the home page (the root page):
goHome() {
this.route.navigate(["/"]);
}
Both use the angular router.
The problem is that when I navigate to and from these pages, the menu bar breaks down for both. Going from workspace to home causes the menu toggle in the top left to disappear, and navigating from home to workspace causes the split pane to disappear.
I have tried using the deprecated navController, but the same behavior remains.
Here is the HTML for home.page.html:
<ion-menu
type="push"
content-id="main-content"
persistent="true"
auto-hide="false"
mode="ios"
style="--side-max-width: 100px;"
>
<ion-content>
<ion-list lines="none">
<ion-item
*ngIf="afAuth.authState | async as user"
style="padding-top: 20px; margin-bottom: 20px;"
>
<ion-avatar slot="start">
<img [src]="user.photoURL" alt="?" />
</ion-avatar>
<ion-label>
{{user.displayName}}
</ion-label>
</ion-item>
<!-- Handle sign out and global tags (click)="presentPopover($event)"-->
<ion-button
expand="block"
(click)="auth.signOut()"
style="
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
margin-bottom: 20px;
"
>Log Out</ion-button
>
<!-- render if we do not have a user -->
</ion-list>
</ion-content>
</ion-menu>
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<div class="ion-page" id="main-content" mode="ios">
<!-- TOOLBAR -->
<!-- TOOLBAR -->
<!-- TOOLBAR -->
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Marion - Home </ion-title>
</ion-toolbar>
</ion-header>
<!-- MAIN CONTENT -->
<!-- MAIN CONTENT -->
<!-- MAIN CONTENT -->
<ion-content class="ion-padding">
<!-- RENDER ALL THINGS -->
<app-workspaces></app-workspaces>
</ion-content>
</div>
Here is the HTML for workspace.page.html:
<ion-split-pane
when="xl"
content-id="main-content"
persistent="true"
auto-hide="false"
mode="ios"
enable-menu-with-back-views="“true”"
style="--side-max-width: 100px;"
>
<ion-menu
type="push"
content-id="main-content"
#mymenu
style="--side-max-width: 100px;"
>
<ion-content>
<ion-list lines="none">
<!-- User information, allowing for signing out -->
<ion-item style="padding-top: 20px; margin-bottom: 20px;">
<ion-avatar slot="start">
<img
src="https://pbs.twimg.com/profile_images/1206645456450793474/x0o6c-tz.jpg"
/>
</ion-avatar>
<ion-label>
<h2>Username</h2>
</ion-label>
</ion-item>
<ion-button
expand="block"
style="
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
margin-bottom: 20px;
"
>Add (note or item)</ion-button
>
<ion-item
><h5>
Popover contains sign in/out, and global tags modal
</h5></ion-item
>
<ion-menu-toggle auto-hide="false">
<ion-item button (click)="goHome()" id="nav-button">
<ion-icon slot="start" name="arrow-back-outline"></ion-icon>
<ion-label>
Back to Workspaces
</ion-label>
</ion-item>
<ion-item button>
<ion-icon slot="start" name="documents-outline"></ion-icon>
<ion-label>
All
</ion-label>
</ion-item>
<ion-item button id="nav-button">
<ion-icon slot="start" name="trash-outline"></ion-icon>
<ion-label>
Trash
</ion-label>
</ion-item>
<ion-item button id="nav-button">
<ion-icon slot="start" name="git-network-outline"></ion-icon>
<ion-label>
Map
</ion-label>
</ion-item>
<ion-item button id="nav-button" style="margin-bottom: 20px;">
<ion-icon slot="start" name="pricetags-outline"></ion-icon>
<ion-label>
Local Tags
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<!-- TAG SECTION -->
<ion-item-divider color="light" style="margin-bottom: 20px;">
Tags
</ion-item-divider>
<ion-list lines="none">
<ion-menu-toggle auto-hide="false">
<!-- Example Tag Group -->
<ion-item>
<ion-chip color="primary">
<ion-icon name="pricetag-outline"></ion-icon>
<ion-label color="dark">Class 1</ion-label>
</ion-chip>
</ion-item>
<ion-item>
<ion-chip color="warning">
<ion-icon name="pricetag-outline"></ion-icon>
<ion-label color="dark">Week 1</ion-label>
</ion-chip>
</ion-item>
<ion-item>
<ion-chip color="danger">
<ion-icon name="pricetag-outline"></ion-icon>
<ion-label color="dark"
>Ionic Sub-Menu Replaces ion-select</ion-label
>
</ion-chip>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title
>CS348 (background color matching the workspace color)
</ion-title>
</ion-toolbar>
</ion-header>
<!-- Man Content Area Rendered Here (Kieran)-->
<ion-content class="ion-padding">
<h1>Main Content Area</h1>
</ion-content>
</div>
</ion-split-pane>
Thank you!