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
kapa.ai
kapa.ai119d 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
kapa.ai119d ago
<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below