bug: navigating with multiple split panes causes first menu to never be reactivated

[yogeshshsf]

Hi. i am using 2 split-pane, firstmenu/firstpage will be my home screen. from firstpage i am navigating to secondmenu/secondpage. now when i return back to firstmenu/firstpage, the split-pane is getting hide, can someone help me on this please. see the screenshot and code below.

firstmenu/firstpage:

secondmenu/secondpage:

firstmenu/firstpage:

Below is the github repository to test this:

https://github.com/yogeshshsf/SplitpaneDemo

[yogeshshsf]

Hi. i am using 2 split-pane, firstmenu/firstpage will be my home screen. from firstpage i am navigating to secondmenu/secondpage. now when i return back to firstmenu/firstpage, the split-pane is getting hide, can someone help me on this please. see the screenshot and code below.

Members
0
18 posts
Report post
Posted May 29 (edited)
Hi simon. i am using 2 split-pane, firstmenu/firstpage will be my home screen. from firstpage i am navigating to secondmenu/secondpage. now when i return back to firstmenu/firstpage, the split-pane is getting hide. this is stopper for my application, can you help on this please. see the screenshot and code below.

firstmenu/firstpage:

[liamdebeasi]

Thanks for the issue. I think this problem stems from the fact that we only allow 1 menu to be enabled at a time. If you want these two side panes to be always be open, I would recommend wrapping them in something other than ion-menu.

In your demo repo, I wrapped them each in a div rather than an ion-menu and the issue disappeared. Can you try this and let me know if it works for your use case?

If you really need to use ion-menu, I would recommend only having 1 instance of the menu.

[eduardoRoth]

Issue happens even if only using one ion-menu; @liamdebeasi your quick fix works, if I replace ion-menu tag with a div one, split pane is always shown.

[yogeshshsf]

@liamdebeasi thanks for you help, its much appreciated. it works perfect when you use div..

[eduardoRoth]

When using div tag instead of ion-menu; tags ion-content and ion-footer don't work as expected.

[iamkinetic]

@liamdebeasi are you saying we should have no more than one menu in an application or we may run into problems even if only one of them is shown at one time?

[liamdebeasi]

No, but in the case of the original issue the way the multiple menus were added seemed to cause issues. We are investigating this bug and will post an update here when we have an update. Thanks!

[daveshirman]

@yogeshshsf Any luck on this?

[yogeshshsf]

@daveshirman it is working as expected when i wrap using

as mentioned by @liamdebeasi comment

[Fab4guy]

I have exactly the same problem.

I want to outsource my navigation in a layout component.
I have done all that so far. For testing I created two pages, Home and Contact.
When I load the application, everything is displayed correctly. If I now click on the navigation point Contact, the page changes as expected. If I click on the Home menu item again, the page changes, but the navigation on the left side disappears forever.

I hope you can help me

Here the structure of the different files. I also attach a picture of the folder structure

Sorry but somehow the editor does not want to highlight my code

app-routing.module.ts

`import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {MainLayoutWithSideNavComponent} from './layout/main-layout-with-side-nav/main-layout-with-side-nav.component';

const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
canActivate: [],
},
{
path: 'home',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
},
{
path: 'contact',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/contact/contact.module').then(m => m.ContactPageModule)
}
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
`
main-layout-with-side-nav.component.html

`

Menu

<ion-content>
  <ion-list>
    <ion-list-header>
      Navigate
    </ion-list-header>
    <ion-menu-toggle auto-hide="false">

      <ion-item *ngFor="let nav of navi" button [routerLink]="'/'+ nav.link">
        <ion-icon slot="start"></ion-icon>
        <ion-label>
          {{nav.linkName}}
        </ion-label>
      </ion-item>

    </ion-menu-toggle>
  </ion-list>
</ion-content>

`

app.component.html

<ion-app> <ion-router-outlet animated="false"></ion-router-outlet> </ion-app>

@liamdebeasi liamdebeasi is there a solution?

[thomaux]

I fixed this by replacing the <ion-menu> with a div as mentioned before. Then, in order to make <ion-header> and <ion-content> work properly inside that div, I applied flex-direction: column; to the div. Hope this helps!

[cra1gs]

I fixed this by replacing the <ion-menu> with a div as mentioned before. Then, in order to make <ion-header> and <ion-content> work properly inside that div, I applied flex-direction: column; to the div. Hope this helps!

If you use this method, how does your menu toggle work on smaller screens? My burger menu will not appear, so you cannot access the menu.

[thomaux]

@cra1gs this is how I ended up using the split-pane:

<ion-split-pane when="xs" contentId="location-specifics" [disabled]="closeMenu$ | async">
  <div>
    <ion-content>
      <ion-list>
        ...menu content here
      </ion-list>
    </ion-content>
  </div>

  <ion-router-outlet id="location-specifics"></ion-router-outlet>
</ion-split-pane>

export class SplitPanePage {

  closeMenu$ = this.store.selectedItem$.pipe(
    map((val) => val && window.innerWidth <= 576),
  );
}

@media (max-width: 576px) {
  ion-split-pane {
    --side-min-width: 100%;
  }
}

The basic premise of the above is: when an item is selected AND the screen is smaller than the SM breakpoint (=576px), disable the split screen so the "menu" is not shown. In case no item is selected, only the menu is shown as the when property is set to xs and I've set the side minimum width to 100% for screen widths lower then the SM breakpoint

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing: 7.5.1-dev.11697568647.1ac87d08

Install Example: npm install @ionic/angular@7.5.1-dev.11697568647.1ac87d08

[liamdebeasi]

Thanks for the issue. This has been resolved via #28370, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to keep testing the dev build, and let me know if you run into any problems.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.