How to hide resource from sidebar

wet-aqua · 2024-01-21T23:10:07.911Z

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

K

kapa.ai•1/21/24, 11:10 PM

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

K

kapa.ai•1/21/24, 11:10 PM

----------------------
In Refine, you can hide a resource from the sidebar menu by using the

meta.hide

meta.hide

meta.hide

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,  
 },  
 },  
 ]}  
 />  
);

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

AccessControlProvider

AccessControlProvider

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,
        },
    },
}

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)

K

kapa.ai•1/21/24, 11:10 PM

You can also dynamically change the menu items by programmatically changing the

resources

resources

prop of

<Refine>

<Refine>

or using the

accessControlProvider

accessControlProvider

accessControlProvider

accessControlProvider prop. source (ask-any-questionDynamic Multi-level Menus support?)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•1/21/24, 11:10 PM

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