Custom menu doesn't collapse

[mvanderblom]

I'm trying to add a custom menu following the documentation here: https://marmelab.com/react-admin/Theming.html#using-a-custom-menu. The menu gets displayed ok but when it is collapsed, the text stays visible behind the main content

Open menu:

Closed menu with text visible behind main content:

Codesandbox example:
https://codesandbox.io/s/youthful-fog-h607k?file=/src/App.js

I would expect the collapsing of the menu to be handled by the MenuItemLink component as described here: https://marmelab.com/react-admin/Buttons.html#menuitemlink

I'm not sure what causes the current beahviour

[djhi]

Indeed, thanks for the report. It seems that #6534 introduced this breaking change

[WiXSL]

Duplicate of #6591?

[djhi]

No, that's not the same issue

[mvanderblom]

Thanks for the quick reply and fix!

[windman007]

Still have the same problem on 3.18.3. Some global styles helped for me.
.RaSidebar-fixed-34 { position: inherit !important; width: 100%; }

[felipejh]

Still have the same problema on 3.18.3.
I needed to overwrite the global theme:

RaSidebar: {
      fixed: {
        position: 'inherit'
      }
    }

[mrclayman]

Also got this problem on 3.18.3, sadly. @felipejh , sorry for the noobish question -- how do I apply this globally? I already have a simple global theme to adjust the main colors, which I pass to the Admin component, but simply adding the snippet you posted does not seem to cut it for me.

TIA.

[felipejh]

@mrclayman

I will try to exemplify:

1- CustomMuiTheme.tsx

const theme: RaThemeOptions = {
   overrides: {
      RaSidebar: {
         fixed: {
           position: 'inherit'
         }
       }
   }
}

export { theme } 

2- CustomLayout.tsx

import { theme } ...

<Layout theme={theme}/>

3- App.tsx

<Admin 
   layout={CustomLayout}
/>

[mrclayman]

Thanks for the swift response, @felipejh . 👍 It turns out, I was halfway there. I just needed to nest the RaSidebar object inside overrides.

Cheers! 🙂