other-emerald
other-emerald13mo ago

multiple menu entries pointing to the same resource

Is possible to have in the sidebar multiple items pointing to the same resource but changing the querystring params. Ej: Customer Group 1 -->/customer?groupid=1 Customer Group 2 -->/customer?groupid=2 Customer Group 3 -->/customer?groupid=3
5 Replies
kapa.ai
kapa.ai13mo ago
Hi @nikun. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai13mo ago
---------------------- Yes, it is possible to have multiple items in the sidebar pointing to the same resource but with different query string parameters. You can achieve this by using the render property of the <Sider> component. Here's an example:
import { Layout, Sider } from "@refinedev/antd";

const CustomSider = () => {
return (
<Sider
render={({ items, logout }) => {
return (
<>
<a href="/customer?groupid=1">Customer Group 1</a>
<a href="/customer?groupid=2">Customer Group 2</a>
<a href="/customer?groupid=3">Customer Group 3</a>
{items}
{logout}
</>
);
}}
/>
);
};

const CustomLayout = () => {
return <Layout Sider={CustomSider}>...</Layout>;
};
import { Layout, Sider } from "@refinedev/antd";

const CustomSider = () => {
return (
<Sider
render={({ items, logout }) => {
return (
<>
<a href="/customer?groupid=1">Customer Group 1</a>
<a href="/customer?groupid=2">Customer Group 2</a>
<a href="/customer?groupid=3">Customer Group 3</a>
{items}
{logout}
</>
);
}}
/>
);
};

const CustomLayout = () => {
return <Layout Sider={CustomSider}>...</Layout>;
};
This example uses the render property to customize the sidebar and add the desired navigation links with different query string parameters for the same resource (source (https://refine.dev/docs/faq#how-can-i-add-an-item-to-the-sider-component)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
FAQ | refine
How can I change the form data before submitting it to the API?
kapa.ai
kapa.ai13mo ago
<@710515912771502200> kapa.ai is still learning and improving, please let us how it did by reacting below
continuing-cyan
continuing-cyan13mo ago
Hey @nikun, you can define multiple resource items with same name, all you need to do is to assign unique identifier properties to them, this way they will be rendered separately in the sider. I've created a simple example for it. I've hidden the main customers resource item in the sider using the meta.hide property but that's completely optional 😅 https://codesandbox.io/p/sandbox/charming-kilby-2cujxt?file=%2Fsrc%2FApp.tsx%3A1%2C1
charming-kilby-2cujxt
CodeSandbox is an online editor tailored for web applications.
continuing-cyan
continuing-cyan13mo ago
One little missing thing is the active item with group id is not highlighted since the actual resource match is done for the customers resource but not for the ones with query string. This is happening becase we strip out the query parameters when inferring the resource from the url by matching the action routes with the current path. If this is critical, you can either swizzle the Sider component as you like or switch to parameters instead of query parameters like /customers/group/:groupId.