[FEAT] `<ThemedSiderV2 />` should provide `selectedKeys` on render function

[fatmacann]

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

I want to add a new button to <ThemedSiderV2 /> with render function but render function does not return the selected keys. So I can't add custom style to the selected items.

reproducible example https://stackblitz.com/edit/github-awjdmq?file=src%2FApp.tsx

           <Route
                    element={
                      <ThemedLayoutV2
                        Sider={(props) => (
                          <ThemedSiderV2
                            {...props}
                            render={({ items }) => {
                              return (
                                <Menu
                                  // selectedKeys={['/posts']}
                                  style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    height: '100%',
                                  }}>
                                  {items}
                                  <Button
                                    style={{
                                      marginTop: 'auto',
                                    }}>
                                    Other Button
                                  </Button>
                                </Menu>
                              )
                            }}
                          />
                        )}>
                        <Outlet />
                      </ThemedLayoutV2>
                    }
                  />

Additional context

Development details for the issue

• Add selectedKey as a parameter to <ThemedSiderV2 />'s `render function

<ThemedSiderV2
    Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}
    render={({ items, logout, collapsed, selectedKey }) => {
        // console.log(selectedKey)
        return (
            <>
                <div>My Custom Element</div>
                {items}
                {logout}
            </>
        );
    }}
/>;

• Should be implemented for all UI Libraries

  • https://github.com/refinedev/refine/tree/master/packages/mui
  • https://github.com/refinedev/refine/tree/master/packages/antd
  • https://github.com/refinedev/refine/tree/master/packages/mantine
  • https://github.com/refinedev/refine/tree/master/packages/chakra-ui

• UI tests should be written on packages/ui-tests/src/tests/layout/sider.tsx

• Documentation should be updated

  • https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout/#sider
  • https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#sider
  • https://refine.dev/docs/ui-integrations/mantine/components/themed-layout/#sider
  • https://refine.dev/docs/ui-integrations/chakra-ui/components/themed-layout/#sider

Describe the thing to improve

<ThemedSiderV2 /> render function should return selectedKey

[BatuhanW]

Hey @fatmacann thanks for the report! We'll check it and get back to you.

[BatuhanW]

Hello @fatmacann, you can use useMenu hook from @refinedev/core to get selectedKey and other useful data to render your custom sider.

See the documentation here: https://refine.dev/docs/core/hooks/utilities/use-menu/#creating-a-menu

[BatuhanW]

By the way, it could be a good improvement if we can pass selectedKey to render function here: https://github.com/refinedev/refine/blob/master/packages/antd/src/components/themedLayoutV2/sider/index.tsx#L185

Would you like to make a contribution for this one?

Note: If you want to add a button to redirect to a certain route, you can add a new resource and it's path. These sider buttons are automatically rendered from resource definitions with a link to resource's route.

[fatmacann]

Yes, It would be great

[Vansh-Baghel]

I duplicated the same scenario, and need assistance in understanding the problem,

1. By selected items, are you trying to selected a particular row from the table, and trying to give a custom color to it? @fatmacann
2. Return selectedKey returns /, ie the route, if I use useMenu, but I think selectedKeys and selectedKey are 2 different variables right? Why do we need to pass selectedKey if its returning the path? @BatuhanW

[BatuhanW]

Hey @Vansh-Baghel, selectedKey is returning currently active route as you mentioned in useMenu hook.

Right now users need to swizzle the related components and use useMenu hook to modify menu items. Providing selectedKey would allow users to avoid swizzling components and handling these cases manually.

[Vansh-Baghel]

Understood!! So by passing selectedKey, it could easily be accessed without the need for importing it from useMenu everytime.

[Vansh-Baghel]

@alicanerdurmaz Understood! Thanks for letting me know. Shall I continue to solve the issue, and make the same in all files you mentioned, or is it not required anymore?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.