From 428aad0c0d76ab0b4195b1177323a3ee04d47b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Thu, 15 Aug 2024 11:38:28 +0300
Subject: [PATCH] Fixed #16233 - Sidebar: Overlay of Nested Sidebar Blocks Its
 Own Content

---
 src/app/components/sidebar/sidebar.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts
index 4e1f616ae71..dbb09734335 100755
--- a/src/app/components/sidebar/sidebar.ts
+++ b/src/app/components/sidebar/sidebar.ts
@@ -328,9 +328,13 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
     }
 
     enableModality() {
+        const activeDrawers = this.document.querySelectorAll('.p-sidebar-active');
+        const activeDrawersLength = activeDrawers.length;
+        const zIndex = activeDrawersLength == 1 ? String(parseInt((this.container as HTMLDivElement).style.zIndex) - 1) : String(parseInt((activeDrawers[0] as HTMLElement).style.zIndex) - 1);
+
         if (!this.mask) {
             this.mask = this.renderer.createElement('div');
-            this.renderer.setStyle(this.mask, 'zIndex', String(parseInt((this.container as HTMLDivElement).style.zIndex) - 1));
+            this.renderer.setStyle(this.mask, 'zIndex', zIndex);
             DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-sidebar-mask p-component-overlay p-component-overlay-enter');
 
             if (this.dismissible) {