Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

EdgeSidebar not following 'stylis-plugin-rtl' flipping rules correctly! #1196

Open
aenawi opened this issue Sep 11, 2022 · 1 comment
Open

EdgeSidebar not following 'stylis-plugin-rtl' flipping rules correctly! #1196

aenawi opened this issue Sep 11, 2022 · 1 comment

Comments

@aenawi
Copy link

aenawi commented Sep 11, 2022

Hi

I've created a sample app using pnpm create next-app --typescript.

I was testing the code from Right to Left page, then when I changed the scheme config for leftEdgeSidebar like this:

    leftEdgeSidebar: {
      config: {
        xs: {
          variant: 'temporary',
          width: 256,
        },
        sm: {
          variant: 'persistent',
          width: 256,
          persistentBehavior: 'fit',
        },
      },
    },

The 'EdgeSidebar' component behave wrongly, it was sliding all the way from Left edge of the screen to the Right edge, where it should slide from the right side (attachment: Wrong Behavior)!

However if I do the following:

  1. Set the dir='rtl' property for the <html> tag under pages/_document.tsx.
  2. Remove <CacheProvider value={cacheRtl}> and <div dir="rtl"> tags completely.
  3. Update the scheme config like this:
    rightEdgeSidebar: {
      config: {
        xs: {
          variant: 'temporary',
          width: 256,
        },
        sm: {
          variant: 'persistent',
          width: 256,
          persistentBehavior: 'fit',
        },
      },
    },
  1. Set the property anchor="right" for <EdgeSidebar> component.

Everything seems working as expected, since all components inherits the <html dir="rtl"> correctly. How I knew that is by inserting <ContentMockup /> component inside <Content> where all the children flipped to RTL correctly! (attachment: Right Behavior)

Any hints please?!

Thanks

Right Behavior (using <html dir='rtl'> inside pages/_document.tsx):
Right Behavior

Wrong Behavior (using stylis-plugin-rtl):
Wrong Behavior
@siriwatknp siriwatknp mentioned this issue Aug 13, 2024
Open
1 task
@mauro-ni
Copy link

mauro-ni commented Sep 5, 2024

@siriwatknp Hi, I'm writing here because the issue I have may be related to this one.

EdgeSidebar seems not following theme palette mode (I have a problem when selectedTheme is lightTheme):
in order to fix I need to force background & color on EdgeSidebar.

Many thanks for your help.

Mauro

In the following example selectedTheme may be lightTheme or darkTheme.

<ThemeProvider theme={selectedTheme}>
    ...
    <Root>
        <ScrollToTop />
        <CssBaseline />
        <Header
            sx={{
                ...
            }}
        >
           ....
        </Header>
        <ThemeProvider theme={darkTheme}>
            <EdgeSidebar
              sx={(theme) => ({
                ...applyEdgeSidebarStyles({
                  theme,
                  config: {
                    xs: {
                      variant: "temporary",
                      width: "256px",
                    },
                    md: {
                      variant: "permanent",
                      width: "256px",
                      collapsible: true,
                      collapsedWidth: "65px",
                    },
                  },
                }),


                // FIX: need to force background & color in order to make it work when in light theme
                background: theme.palette.background.paper,
                color: theme.palette.text.primary,


              })}
            >
                ....
            </EdgeSidebar>
        </ThemeProvider>
        <Content sx={{ py: 2 }}>
             ...
        </Content>
    </Root>
    ...
</ThemeProvider>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@aenawi @mauro-ni