typical-coral
typical-coral10mo ago

Sider menu items not showing up

Hey everyone, I have a problem where useMenu does return a list of 2 items but the renderSider Method inside of my ThemedSider (it's just swizzled, nothing special) only renders one of them:
...
resources={[
{
name: 'dashboard',
list: '/',
meta: {
label: 'Dashboard',
icon: <DashboardOutlined />,
},
},
{
name: 'tree',
list: '/tree',
meta: {
label: 'Databases Tree',
icon: <DatabaseOutlined />,
},
},
...
...
resources={[
{
name: 'dashboard',
list: '/',
meta: {
label: 'Dashboard',
icon: <DashboardOutlined />,
},
},
{
name: 'tree',
list: '/tree',
meta: {
label: 'Databases Tree',
icon: <DatabaseOutlined />,
},
},
...
routes:
...
<Route index element={<DashboardPage />} />
<Route path={'tree'} element={<DatabaseTree />} />
...
...
<Route index element={<DashboardPage />} />
<Route path={'tree'} element={<DatabaseTree />} />
...
Console log inside of renderSider returns both items but only the Dashboard is rendered 🤷‍♂️ . Any idea?
No description
No description
9 Replies
kapa.ai
kapa.ai10mo ago
Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it's not entirely clear why only one item is being rendered in your ThemedSider component. However, there are a few things you could check: 1. Ensure that both resources are correctly defined in the resources prop of the <Refine> component. From the code you've shared, it seems like they are, but it's worth double-checking. 2. Make sure that both routes are correctly defined and match the list property of the resources. Again, it seems like they are from your code, but it's worth confirming. 3. Check the render function in your ThemedSider component. This function is responsible for rendering the menu items and other elements inside the ThemedSider. Make sure that it's correctly rendering the items prop, which is the list of navigation items. Here's an example of how the render function could look like:
render={({ items, logout }) => {
return (
<>
{items}
{logout}
</>
);
}}
render={({ items, logout }) => {
return (
<>
{items}
{logout}
</>
);
}}
In this example, all items in the items array should be rendered. If you're still having issues, it might be helpful to look at the Refine documentation (https://refine.dev/docs) or the source code of the ThemedSider (https://github.com/refinedev/refine/blob/next/packages/mui/src/components/themedLayoutV2/sider/index.tsx) component for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
typical-coral
typical-coral10mo ago
@core kapa.ai is right with all the points, but I checked all of them 😄
correct-apricot
correct-apricot10mo ago
Hello @bastianwegge, can you share with me swizzled ThemedSider please ?
typical-coral
typical-coral10mo ago
@alicanerdurmaz sure!
correct-apricot
correct-apricot10mo ago
do you have access control provider ?
correct-apricot
correct-apricot10mo ago
because in my app, with your sider component all items are rendered
No description
typical-coral
typical-coral10mo ago
Yes we are using an access-control-provider, I'm gonna check this right away, thank you! That was it 🤦‍♂️ , thank you very much for the hint @alicanerdurmaz !
correct-apricot
correct-apricot10mo ago
I'm glad to hear that 🚀