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
K
kapa.ai209d 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: ----------------------
K
kapa.ai209d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
D
dependent-tan209d ago
@core kapa.ai is right with all the points, but I checked all of them 😄
S
sunny-green208d ago
Hello @bastianwegge, can you share with me swizzled ThemedSider please ?
D
dependent-tan208d ago
@alicanerdurmaz sure!
S
sunny-green208d ago
do you have access control provider ?
S
sunny-green208d ago
because in my app, with your sider component all items are rendered
No description
D
dependent-tan208d 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 !
S
sunny-green208d ago
I'm glad to hear that 🚀
More Posts
remove siderI want to remove antd sider programatically.antdesign sider menu popup hangs on collapsedwhen manually setCollapsed(true) on antdesign sider, the selected key menu popup will lingeruseGetToPath error<Button onClick={() => { go({ to: getToPath({ useEditableTable tableProps datatypehi, i have a question. why do the dataSource inside the tableprops property from useEditableTable oReact Query Options: Enabled change does not disable/pause requestsHi everyone, I am currently developing a page that incorporates various filters, some of which can AuthPage AntDIs there a convenient way to only render the autProvider section in the AuthPage (LoginPage) and do Seeking Advice: Choosing Refine JS for News Website Admin Dashboard?Hey everyone, I'm a beginner developer, and I'm working on a news website project that needs an admSite Title refine v4Hey, I want to change site title. The one which appear on chrome tab. I am update site logo(favicon)Is there any way to prevent hook from calling api if variable is still undefined?Is there any way to prevent hook from calling api if variable is still undefined in a single componeDragger on drop = false still calling api on dragdragger is calling api when there is no actionUsing refine as an admin panel (beginner)I am building admin panel for news website to upload, delete, update and overall controll news conterename refine default create button in the listhow to rename create button in list which is coming by giving create resourceInvalid hook call. Hooks can only be called inside of the body of a function componenthello, i got this error Invalid hook call. Hooks can only be called inside of the body of a functuseEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under a