[FEAT] Unable to highlight non-CRUD page on menu item

[linkscope]

Is your feature request related to a problem? Please describe.

Hi, I'm having a confusing time on how to highlight non-CURD pages to the left menu items and display the breadcrumb navigation properly?

I now have a usage scenario: there is an order placing function in the member module that is not part of the member's CURD, and this order placing function only requires a create page.

Currently my needs are that I want to highlight this page to the Member menu in the left menu item, and I want that new page to be consistent with the breadcrumb navigation like the one that creates the member, and since I need the member's ID, maybe I should just need an edit page?

Is it now possible to fix the issue in the resources config item? I asked Refine Docs AI and didn't find a solution, if there is a solution please let me know, my code is similar to this:

const resources = [
 {
    name: 'vip',
    list: '/vip',
    create: '/vip/create',
    edit: '/vip/edit/:id',
    meta: {
      label: 'Member',
      icon: <CrownOutlined />,
    },
  },
  {
    name: 'vipOrder',
    list: '/vip',
    edit: '/vip/order/:id',
    meta: {
      parent: 'vip',
      hide: true,
    },
  }
]

Thanks, team

Describe alternatives you've considered

No response

Additional context

No response

Describe the thing to improve

Ability to implement non-CURD page highlighting in resources configuration, and to do so in a way that is consistent with the breadcrumb navigation of Create, Edit pages.

[aliemir]

Hey @linkscope, thank you for opening an issue here! I think I understand the issue but would love to have some details on what you want this feature to look like.

As a workaround, I think you can define your secondary resource like below:

{
  name: "vip",
  identifier: "vipOrder", // So same resource name is inferred by the data provider
  list: "/vip/order/:id", // To have it listed in the sider menu (I'll explain more on this below)
  meta: { parent: "vip" },
}

This will make this page available in the menu, but :id is required for your page and it will navigate you to a wrong page unfortunately.

We have hideOnMissingParameter in useMenu hook that powers the sider components but looks like we've missed this option to be configurable through props of <ThemedSiderV2 /> components.

If you swizzle the <ThemedSiderV2 /> component and set hideOnMissingParameter to true, it will be only visible when there's an :id value present in the routes or meta.

Let me list what we can do and maybe we can plan this for our next releases:

• hideOnMissingParameter should be configurable through props or Refine options but still, the default value should be true anyways, I think we can have this default value issue fixed in the next release
• Even if there's no list value of a resource, it should still highlight the parents in the sider if it's the active route.
• We're discussing on having the ability to define custom actions for a resource and make it work with menus, breadcrumbs etc. but this is not finalized yet so I cannot give an exact time or how it will work on this one.

For now, about the swizzle workaround, you can swizzle the sider component and use it in your layout, then you can define a custom logic for your highlighted menu items. Or you can use the hideOnMissingParameter prop like I've mentioned above.

Let us know if the features/fixes I've listed above works for you 🚀

[linkscope]

@aliemir Thanks for the detailed answer! I'll try to so if the change fixes the issue, in the same time I also hope that this swizzle can be reflected in the documentation, I'm sure most admin have many non-CURD pages.

Also I'd like to be able to do this simply by configuring it entirely in resources, e.g. just like this:

const resources = [
 {
   name: 'member',
   list: '/member',
   edit: '/member/edit/:id',
   create: '/member/create',
   recharge: '/member/recharge/:id' // non-CURD page
 }
]

[aliemir]

@linkscope, I just want to have your opinion and feedback on this; what do you expect by defining a custom route in your resource definitions (in this case recharge)? Having it work with menus, breadcrumbs and navigation hooks/buttons maybe? Do you have any other features in mind to work with this?

[linkscope]

@aliemir Thanks for your patience in listening! I would expect custom routes (in this case recharge) to work with menus, breadcrumbs and navigation hooks, of course since it's a custom route the default headerButtons can be eliminated, and it would be nice if the useDocumentTitle doesn't need to be set separately, as I did in the previous question, this flow is fully consistent with CURD pages. I hope that the resources configuration should not be limited to CURD, but can be more rich to configure the custom page, this experience is a bit similar to the vue of the vue-router operation process, for example, in this case I only need to add a line of code to achieve the functionality I expect, and at the same time, in the configuration This painless development process is great, and I hope the team will consider doing this if they can, and thanks for the work!