foreign-sapphire•2y 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•2y 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•2y 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•2y ago

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

noble-gold•2y 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.

noble-gold•2y 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.