Layout breaks with RTL language , especially the sidebar

[kazem3d]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

When switching the language to a right-to-left (RTL) layout in MUI Toolpad, the entire page layout breaks. The issue is particularly noticeable with the sidebar, which does not shift to the right side as expected. Instead, it remains on the left or gets misaligned.

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: rtl,right to left

[Janpot]

It seems to work when the docs are set to rtl, are you sure you followed the steps in https://mui.com/material-ui/customization/right-to-left/#1-set-the-html-direction? If not, could you provide a reproduction in the form of a codesandbox/stackblitz?

Perhaps we need a specific demo for this in the docs?

[kazem3d]

It seems to work when the docs are set to rtl, are you sure you followed the steps in https://mui.com/material-ui/customization/right-to-left/#1-set-the-html-direction? If not, could you provide a reproduction in the form of a codesandbox/stackblitz?

Perhaps we need a specific demo for this in the docs?

I followed all the rtl steps :
here is the codesandbox:
https://codesandbox.io/p/github/kazem3d/mui-toolpad-rtl/main?import=true

[apedroferreira]

It seems to work when the docs are set to rtl, are you sure you followed the steps in https://mui.com/material-ui/customization/right-to-left/#1-set-the-html-direction? If not, could you provide a reproduction in the form of a codesandbox/stackblitz?
Perhaps we need a specific demo for this in the docs?

I followed all the rtl steps : here is the codesandbox: https://codesandbox.io/p/github/kazem3d/mui-toolpad-rtl/main?import=true

Hey, take a look at step 3 of the guide in https://mui.com/material-ui/customization/right-to-left/#3-configure-rtl-style-plugin (Configure RTL style plugin). You need to use stylis-plugin-rtl, and you're probably using Emotion.

Also not sure if it's necessary to pass a custom theme to the AppProvider with direction: 'rtl' like:

const theme = createTheme({
    direction: 'rtl',
    cssVariables: {
      colorSchemeSelector: 'data-toolpad-color-scheme',
    },
    colorSchemes: { dark: true },
  });

Feel free to let us know if changing the theme also ends up being necessary, as if it is we can add that extra step to the Toolpad docs.