[docs][Drawer] Fix Right-anchored persistent drawer intercepts click when it is closed

[alzaar]

I am opening this up to verify the pipeline tests and will finalize the PR once the pipeline is green.

Fixes #29997

Before: https://mui.com/material-ui/react-drawer/#persistent-drawer
After: https://deploy-preview-38760--material-ui.netlify.app/material-ui/react-drawer/#persistent-drawer

[mui-bot]

Netlify deploy preview

https://deploy-preview-38760--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 710493b

[ZeeshanTamboli]

@alzaar Will you be working on it further?

[alzaar]

@ZeeshanTamboli Yes, I will be continuing with this. Is there an urgency to wrap this up ?

[ZeeshanTamboli]

No urgency, just wanted to make sure its active.

[alzaar]

Hi @ZeeshanTamboli Would it be possible to get this reviewed ? It addresses this issue

[ZeeshanTamboli]

@alzaar Thanks for the PR! If we add a z-index to the right-anchored persistent drawer, it raises a question: why isn't it added to the left-anchored drawer?

According to the documenation:

The drawer sits on the same surface elevation as the content.

so adding a zIndex isn't the correct approach.

The proper solution is to add position: "relative" to the main content:

--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -37,6 +37,8 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
       }),
       marginRight: 0,
     }),
+    // This is necessary to enable the selection of content. In the DOM, the stacking order is determined by the order o
f appearance. Following this rule, elements appearing later in the markup will overlay those that appear earlier. Since t
he Drawer comes after the Main content, this adjustment ensures proper interaction with the underlying content.
+    postion: 'relative',
   }),
 );

diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/Pers
istentDrawerRight.tsx
index f4f300d84f..b95b6fd1da 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -38,6 +38,8 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
     }),
     marginRight: 0,
   }),
+  // This is necessary to enable the selection of content. In the DOM, the stacking order is determined by the order of
appearance. Following this rule, elements appearing later in the markup will overlay those that appear earlier. Since the
 Drawer comes after the Main content, this adjustment ensures proper interaction with the underlying content.
+  postion: 'relative',
 }));

 interface AppBarProps extends MuiAppBarProps {

This will put the un-positioned element (Drawer) below the positioned element (Main). Check out the following article - https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/

[alzaar]

Thanks @ZeeshanTamboli. This was insightful, I will make the changes and push 'em up.

[ZeeshanTamboli]

Avoid using the sx prop. Instead, follow the above comment and add it to the styled component.

[ZeeshanTamboli]

@alzaar Since I couldn't make changes to your PR, I added the modifications in a different PR, which is #39318. Thanks for your PR and your interest in the issue.