bug: wrapped menu does not work with content property

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.8.7
   @angular-devkit/schematics    : 0.8.7
   @angular/cli                  : 6.2.7
   @ionic/angular-toolkit        : 1.1.0

System:

   NodeJS : v8.11.3 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug

When putting the menu inside a custom component, (app-menu) to make the app component less busy, I get this result :

https://ibb.co/kUDFOV

But normally, I have to have the initial result :

https://ibb.co/cFcLqA

Steps to Reproduce

1 - Generate a new app with menu
2 - Put the ion-menu in the app-menu
<ion-menu contentId="content1" > <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 appPages"> <ion-item [routerDirection]="'root'" [routerLink]="[p.url]"> <ion-icon slot="start" [name]="p.icon"></ion-icon> <ion-label> {{p.title}} </ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-content> </ion-menu>
3 - Put the following in app.component:
<ion-app> <ion-split-pane> <app-layout-menu contentId="content1" [content1]="content"></app-layout-menu> <ion-router-outlet id="content1" main [swipeBackEnabled]="true"></ion-router-outlet> </ion-split-pane> </ion-app>ion

Thank you for your answers !

Hi
Nobody has any solution for this bug ?

thank you so much !

Thanks for your issue! That seems to be like a bug. A workaround would be this:

<ion-app>
  <ion-split-pane when="lg">
    <ion-menu #leftSidebar menuId="left" type="reveal" side="start">
      <app-sidebar-menu></app-sidebar-menu>
    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>

  </ion-split-pane>
</ion-app>

Thank you for your answer ! So it is impossible to apply the principle of angular and to cut the components ?

Okay, sry. I've updated my answer above. It's a bug, you are right :)

No problem, I will look in my side If I have the time and wait the next version to test :)

Hmm.. i had MenuController imported on one of my pages; this may have been breaking it.

@iTEEECH

It's too bad that the functionality has changed since v3. With a v3 project it was straight forward to have ion-menu components on multiple pages/components of the application. This provided more flexibility with the contents of the menu, as well as functionality. It seems that the new implementation of this component intends for ion-menu to only be used for routing.

I agree with @iTEEECH, I find the way that this component has been designed to be poor. The implementation for v3 provided far more flexibility

Any update on this? I'm on v5 and I get this error in production but not in development mode. On debugging found that it happens with SSR. So might be related to this issue stenciljs/core#2119
And as mentioned there having same content-id removes the error but my menu behaves strangely with no menu visible at all

bug is actual with #24907

Hi everyone,

Here is a dev build if anyone is interested in testing a proposed fix: 7.6.2-dev.11704922151.1fd3369f

Install example:

npm install @ionic/react@7.6.2-dev.11704922151.1fd3369f @ionic/react-router@7.6.2-dev.11704922151.1fd3369f

Please note that this is an Ionic 8 build and is subject to the Ionic 8 breaking changes.

fix(menu): menu can be encapsulated in a component (#28801)

Thanks for the issue. This has been resolved via #28801, and a fix will be available in an upcoming release of Ionic Framework. We are shipping this in a major release of Ionic to de-risk some of the internal infrastructure changes we made to resolve this bug. Feel free to continue testing the dev build, and let me know if you run into any issues.

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.

Navigation Menu

Repository navigation

bug: wrapped menu does not work with content property #16304

8 remaining items

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

bug: wrapped menu does not work with content property #16304

Description

Activity

iTEEECH commented on Nov 28, 2018

paulstelzer commented on Dec 7, 2018

iTEEECH commented on Dec 10, 2018

paulstelzer commented on Dec 10, 2018

iTEEECH commented on Dec 11, 2018

8 remaining items

liquidcms commented on Jun 12, 2019

speence commented on Jul 15, 2019

ishan123456789 commented on Jun 6, 2021

KANekT commented on Apr 8, 2022

liamdebeasi commented on Jan 10, 2024

liamdebeasi commented on Jan 15, 2024

ionitron-bot commented on Feb 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions