O

Refine•2y ago

ordinary-sapphire

How can I show a menu item in disabled state in sidebar?

I am using Antd with Refine. I want to opt for disabled state using meta in resources, like, {
name: "users",
list: "/users",
meta: {
label: "Users",
icon: "

",
disabled: true, // This resource will be shown as disabled
},
},

Is it possible with default props? also the sidebar is rendered by ThemedLayoutV2 from refine/antd

kapa.ai

K

kapa.ai•5/25/24, 12:03 PM

Hi @Ashutosh Dash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai

K

kapa.ai•5/25/24, 12:04 PM

----------------------
Based on the provided knowledge sources, there is no direct mention of using the

meta

meta

property to disable a menu item in the sidebar when using

ThemedLayoutV2

ThemedLayoutV2

from

@refinedev/antd

@refinedev/antd

. However, you can customize the component to achieve this functionality.

Here is an example of how you can customize the component to disable a menu item based on the property:

kapa.ai

K

kapa.ai•5/25/24, 12:04 PM

In this example, the component uses the hook to get the menu items and then maps over them to render each item. The property of each is set based on the property of the resource.

For more information on customizing the component, you can refer to the documentation (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#sider).

If you need further customization or run into any issues, you can also check out the Contributing (https://refine.dev/docs/contributing/) guide for more details on how to modify the UI packages.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai

K

kapa.ai•5/25/24, 12:04 PM

@749525604466032711 kapa.ai is still learning and improving, please let us know how it did by reacting below

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import { Menu } from "antd";  
import { useMenu } from "@refinedev/core";

const CustomSider = () => {
    const { menuItems } = useMenu();

    return (
        <ThemedSiderV2
            render={({ items, logout, collapsed }) => {
                return (
                    <Menu>
                        {menuItems.map((item) => (
                            <Menu.Item
                                key={item.key}
                                icon={item.icon}
                                disabled={item.meta?.disabled}
                            >
                                {item.label}
                            </Menu.Item>
                        ))}
                        {logout}
                    </Menu>
                );
            }}
        />
    );
};

const App: React.FC = () => {  
    return (  
        <Refine  
            // ...  
        >  
            <ThemedLayoutV2  
                Sider={() => <CustomSider />}  
            >  
                {/* ... */}  
            </ThemedLayoutV2>  
        </Refine>  
    );  
};  

export default App;

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import { Menu } from "antd";  
import { useMenu } from "@refinedev/core";

const CustomSider = () => {
    const { menuItems } = useMenu();

    return (
        <ThemedSiderV2
            render={({ items, logout, collapsed }) => {
                return (
                    <Menu>
                        {menuItems.map((item) => (
                            <Menu.Item
                                key={item.key}
                                icon={item.icon}
                                disabled={item.meta?.disabled}
                            >
                                {item.label}
                            </Menu.Item>
                        ))}
                        {logout}
                    </Menu>
                );
            }}
        />
    );
};

const App: React.FC = () => {  
    return (  
        <Refine  
            // ...  
        >  
            <ThemedLayoutV2  
                Sider={() => <CustomSider />}  
            >  
                {/* ... */}  
            </ThemedLayoutV2>  
        </Refine>  
    );  
};  

export default App;