Merge pull request #5140 from thornbill/fix-backdrop-position

src/components/Backdrop.tsx

@@ -1,7 +1,15 @@
 import Box from '@mui/material/Box';
 import React, { useEffect } from 'react';
+
+import layoutManager from './layoutManager';
 import { DRAWER_WIDTH } from './ResponsiveDrawer';
 
+const styles = layoutManager.experimental ? {
+    left: {
+        md: DRAWER_WIDTH
+    }
+} : {};
+
 const Backdrop = () => {
     useEffect(() => {
         // Initialize the UI components after first render
@@ -12,11 +20,7 @@ const Backdrop = () => {
         <>
             <Box
                 className='backdropContainer'
-                sx={{
-                    left: {
-                        md: DRAWER_WIDTH
-                    }
-                }}
+                sx={styles}
             />
             <div className='backgroundContainer' />
         </>

src/components/layoutManager.js

@@ -18,6 +18,7 @@ class LayoutManager {
     tv = false;
     mobile = false;
     desktop = false;
+    experimental = false;
 
     setLayout(layout, save) {
         if (!layout || layout === 'auto') {
@@ -31,7 +32,8 @@ class LayoutManager {
             setLayout(this, 'tv', layout);
             setLayout(this, 'desktop', layout);
 
-            if (layout === 'experimental') {
+            this.experimental = layout === 'experimental';
+            if (this.experimental) {
                 const legacyLayoutMode = browser.mobile ? 'mobile' : this.defaultLayout || 'desktop';
                 setLayout(this, legacyLayoutMode, legacyLayoutMode);
             }