genetic-orange•8mo ago

How to hide resource from sidebar

How can I hide a menu item from sidebar resource? I want to hide some particular menu links from my sidebar depending on what account type is signed in

2 Replies

kapa.ai•8mo ago

Hi @Script. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can hide a resource from the sidebar menu by using the meta.hide property of the resource. Here is an example:

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);

In this example, the "users" resource will be hidden from the menu but will still be accessible via the URL. source (https://refine.dev/docs/guides-concepts/faq#how-to-hide-items-from-the-sider-component) If you want to hide resources based on the user's permissions, you can use the AccessControlProvider. Here is an example:

export const accessControlProvider : AccessControlProvider= {
    can: async ({ resource, action, params }) => {
        const roles = (await authProvider.getPermissions?.() as string[])||[];
        if (resource === "User") {
            return {
                can: roles.includes('admin'),
                reason: "Unauthorized",
            };
        }

        return { can: true };
    },
    options: {
        buttons: {
            enableAccessControl: true,
            hideIfUnauthorized: true,
        },
    },
}

export const accessControlProvider : AccessControlProvider= {
    can: async ({ resource, action, params }) => {
        const roles = (await authProvider.getPermissions?.() as string[])||[];
        if (resource === "User") {
            return {
                can: roles.includes('admin'),
                reason: "Unauthorized",
            };
        }

        return { can: true };
    },
    options: {
        buttons: {
            enableAccessControl: true,
            hideIfUnauthorized: true,
        },
    },
}

In this example, the "User" resource will be hidden from the menu for non-admin users. source (https://github.com/refinedev/refine/issues/4852) You can also dynamically change the menu items by programmatically changing the resources prop of <Refine> or using the accessControlProvider prop. source (https://discord.com/channels/837692625737613362/1068186486618468352) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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