Sidebar: Overlay of Nested Sidebar Blocks Its Own Content

[kazakevich-alexei]

Describe the bug

When using nested sidebars (one sidebar opened within another), the overlay of the second sidebar incorrectly blocks its own content. The expected behavior is that the overlay of the second sidebar should block the content of the first sidebar, but it should not block the content of the second sidebar itself.

Environment

Angular Version: 16.2.12
PrimeNG Version: 16.9.14-lts
Browser: Chrome
Operating System: Windows

Reproducer

https://stackblitz.com/edit/iq1kpr?file=src%2Fapp%2Fdemo%2Fsidebar-basic-demo.ts

Angular version

16.2.12

PrimeNG version

16.9.14-lts

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.5.0

Browser(s)

Chrome (Latest)

Steps to reproduce the behavior

Open the first in your Angular application.
While the first sidebar is open, open a second within the first.
Observe that the overlay of the second sidebar blocks its own content, making it inaccessible.

Expected behavior

The second sidebar's overlay should block the content of the first sidebar but should not block the content of the second sidebar itself, allowing full interaction with the second sidebar's content.