[FEAT] Unable to highlight non-CRUD page on menu item about refine HOT 4 OPEN

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 🚀

from refine.

@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
 }
]

from refine.

@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?

from refine.

@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!

from refine.