narrow-beige•11mo 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?

9 Replies

kapa.ai•11mo 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•11mo ago

<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below

narrow-beige•11mo ago

@core kapa.ai is right with all the points, but I checked all of them 😄

ratty-blush•11mo ago

Hello @bastianwegge, can you share with me swizzled ThemedSider please ?

narrow-beige•11mo ago

@alicanerdurmaz sure!

ThemedSider.tsx

ratty-blush•11mo ago

do you have access control provider ?

ratty-blush•11mo ago

because in my app, with your sider component all items are rendered

narrow-beige•11mo 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 !

ratty-blush•11mo ago

I'm glad to hear that 🚀