Panel menu with submenu expanded by itself when in sideBar

[majkers]

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Test case:
https://angular-ivy-2l4wfz.stackblitz.io
https://stackblitz.com/edit/angular-ivy-2l4wfz?file=src/styles.css

Current behavior
PanelMenu's subMenu expanded by itself when placed inside sideBar

Expected behavior
Submenu should not be expanded casue none clicked it...

Minimal reproduction of the problem with instructions
Scenario:

1. Click button with "Click me" label and do nothing more
2. Close sideBar by click X icon or by clicking somewhere outside sidebar
3. Click button "Click me" once again
4. "Menu two" is being expanded by itself with icon > wrongly indicating its state

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
I am using IntelliI IDEA

• Angular version: 5.X
  Angular 12/13 doesn't matter

• PrimeNG version: 5.X
  12.2.3 and 13.02 as well

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  I am using Chrome 96.0.4664.93

[pabloborrego93]

Hello,

we are experiencing the same issue after updating primeng from 11.1.0 to last version. When the side bar closes, all the items of the PanelMenu are expanded and then, the behaviour is so strange.

Regards.

[NilavPatel]

Hi, same issue in version 13.1.0. I have used PanelMenu in Sidebar.

[NilavPatel]

Add a PR with solution to this defect
#11367

[OmarEnriqueCocaBuitrago]

Same issue:
Angular 13.3.11
PrimeNG 13.4.1

[Bhavin-Repo]

@NilavPatel did you find a solution for this issue. I am facing the same issue. :(

[rafaelgdp]

I just updated my primeng to the lastest release (14.1.0) which was made available yesterday and angular to the latest version(14.2.1) and this problem still persists. They did not accept this PR (#11367) nor addressed this issue yet.

[NilavPatel]

Add below CSS, it works for me

.p-panelmenu .p-toggleable-content {
height: 0;
}
.p-panelmenu .p-toggleable-content.p-panelmenu-expanded {
height: auto;
}

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[majkers]

Issue still exist in 14.2 @mertsincan I can;t reopen it so I will submit a new one

https://stackblitz.com/edit/angular-ivy-2l4wfz?file=package.json

[AlexAvilaSantos]

<p-sidebar [(visible)]="visibleSidebar"  >
    <p-panelMenu *ngIf="visibleSidebar" [model]="modulos" ></p-panelMenu>
</p-sidebar>

lil trick, use same boolean for visible with ngif in panelMenu, have visual bug but works

[GerardoAlan]

In Angular 15 I apply these styles:

:host ::ng-deep .p-panelmenu .p-toggleable-content {
height: 0;
}

:host ::ng-deep .p-panelmenu .p-toggleable-content.p-panelmenu-expanded {
height: auto;
}

It works only in one level of the p-panelMenu, however if your menu has two or three level children those children seem open.

[amurilo]

In Angular 15 I apply these styles:

:host ::ng-deep .p-panelmenu .p-toggleable-content { height: 0; }

:host ::ng-deep .p-panelmenu .p-toggleable-content.p-panelmenu-expanded { height: auto; }

It works only in one level of the p-panelMenu, however if your menu has two or three level children those children seem open.

2024 and the error persists. The solution I used is pretty much the same but now it breaks the children (angular 18)

edit;

I managed to workaround that by removing the "content" template, for example;

<p-sidebar [(visible)]="isOpen" styleClass="w-96">

    <ng-template pTemplate="header">
        <p>whatever you want in the header</p>
    </ng-template>
     
    <ng-template pTemplate="footer">
        <p>whatever you want in the footer</p>
    </ng-template>
    
    <nav class="sidebar-menu" role="navigation">
        <p-panelMenu [multiple]="false" [model]="menus" />
    </nav>

</p-sidebar>

[linkiez]

In Angular 15 I apply these styles:

:host ::ng-deep .p-panelmenu .p-toggleable-content { height: 0; }

:host ::ng-deep .p-panelmenu .p-toggleable-content.p-panelmenu-expanded { height: auto; }

It works only in one level of the p-panelMenu, however if your menu has two or three level children those children seem open.

This is better:
:host ::ng-deep .p-panelmenu-header + .p-toggleable-content {
height: 0;
}

:host ::ng-deep .p-panelmenu-header + .p-toggleable-content.p-panelmenu-expanded {
height: auto;
}

used on primeng 17.