[FEAT]: Provide a way to tweak navigation for resources

[Mr0nline]

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

It would be good if we can forcefully render on Resource click. For example, I'm working on a big-scale ERP-like software and I've created some resources like the following.

//...some jsx stuff
resources={[
  {
    name: 'dashboard',
    list: '/',
    meta: {
      label: 'Dashboard',
      icon: <Dashboard />
    }
  },
  {
    name: 'weight-calculator',
    list: WEIGHT_CALCULATOR_PATH,
    meta: {
      label: 'Weight Calculator',
      parent: 'Tools',
      icon: <Calculate />
    }
  },
  {
    name: 'weight-calculator-records',
    list: WEIGHT_CALCULATOR_RECORDS_PATH,
    meta: {
      label: 'Calculation Records',
      parent: 'Tools',
      icon: <Feed />
    }
  },
  {
    name: 'roles-list',
    list: ROLES_LIST_PATH,
    meta: {
      label: 'Roles',
      icon: <ManageAccounts />
    }
  }
]}

Currently, it seems there is no easier way to achieve the reload on the menu click. What I mean here is that if my current tab is Weight Calculator and I click on it again, It just navigates to the path but it doesn't trigger remounting. Because of this, the UI gets reset but the form values stay persistent!

Describe alternatives you've considered

I can do a nasty workaround using some sort of useEffect and state to check if the values have been reset and then upon that, I can reset the form as well so it just seems a bit of a hacky way to do this!

Additional context

Describe the thing to improve

I have 2 suggestions. There can be an optional prop that ignores active tab click, So if the route and resource are on the same URL, Clicking on a resource will not trigger route change if this prop has been turned on

Alternatively, we can have a prop similar to navigationProps which contains settings related to navigations like reload: boolean etc!

[Mr0nline]

I'm willing to work on a PR if anyone has a clue about where shall I be starting! :crossed_fingers:

[Mr0nline]

Bumping this up for any leads!

[aliemir]

Hey @Mr0nline, thank you for the issue! Do you think making the active element unclickable will be enough? I'm closer to this option than to add a reload property for sake of simplicity. And if anyone wants to change the behavior of in an uncommon way they can use the swizzle command to achieve that? 🤔

Let's settle the details of the implementation and then we will assign the issue to you. I'll also try to assist you on how to start the development.

[Mr0nline]

Hello @aliemir, Yes adding reload: false should be fine for my use case and is a simpler approach imo as well. I looked at swizzle to do a complete override but I thought to raise a feature request as it seems useful for general usecase and also contain a subtle API changes in default props.

Do let me know about starting points and I'll start working on the contribution :crossed_fingers:

[Mr0nline]

@aliemir :wave: Bumping this up so that I can start working on it ASAP :+1:

[aliemir]

Hello @aliemir, Yes adding reload: false should be fine for my use case and is a simpler approach imo as well. I looked at swizzle to do a complete override but I thought to raise a feature request as it seems useful for general usecase and also contain a subtle API changes in default props.

Do let me know about starting points and I'll start working on the contribution 🤞

Actually, I meant to support the other option 😅 Making the active item inactive is going to be an easy to implement and easier to maintain. You can start by checking out our Contributing doc. You need to implement this feature by updating the UI packages (packages/antd, packages/mui, packages/chakra-ui, packages/mantine). You can run the base examples (examples/base-antd, examples/base-material-ui etc.) to see your changes while in development.

[Mr0nline]

Actually, I meant to support the other option :sweat_smile:

So, Basically, Refine should disable active routes by default and there will be no props/settings to make it enable right? Is this what I shall be aiming to implement? :thinking: Sorry just a bit confused haha.

This one also will work for my use case though

[aliemir]

Let's have a way to toggle the disabled status of the active item click by adding a prop to <Sider> components.

<Sider> components use a shared interface which you can access at @refinedev/ui-types (/packages/ui-types). We can add a prop like activeItemDisabled?: boolean.

In the <Sider> components of the UI packages, we will use this prop to determine the behavior and disable the onClick method (or whichever is used in there) of the menu item.

Is this enough for you to start with or do you think there are still blind spots? I'd be happy to help clear things out. If you encounter any issues while working on this, let us know from our Discord channel 🚀 🚀

[Mr0nline]

That'll be more than enough! Will start on this soon :raised_hands:

[aliemir]

Hey @Mr0nline, any updates here? Just curious 😅

[Mr0nline]

Hi @aliemir, Yes but I didn't got much time to finish the feature yet. Hopefully it's not urgent and I can hopefully finish it this week :pray:

[Mr0nline]

@aliemir, I've did the required changes (hopefully)! Let me know if any further changes are required :crossed_fingers: